@extends('layout.front')
@section('title', "Zarade vendora | {$vendor->name}")

@section('content')
<div class="page-wrapper">

    <!-- Header Account -->
    @include('front-inc._header-account')

    <!-- section main-container -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main-content -->
                <div class="main-content col-12">

                    <nav class="breadcrumb-holder" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Moja zarada</a></li>
                            <li class="breadcrumb-item active" aria-current="page">
                                {{ $vendor->name }}
                            </li>
                        </ol>
                    </nav>
                    <!-- breadcrumb end -->

                    <div class="main-title-hr-holder">
                        <div class="main-title-hr">
                            <h1>Evidencija</h1>
                        </div>
                        <!-- main-title-hr end -->
                        <p class="text-light">Na ovoj strani se nalaze podaci o iznosu za fakturisanje i ukupnoj zaradi</p>
                    </div>
                    <!-- main-title-hr-holder end -->

                    <div class="hr-user-view">
                        <div class="media">
                            <x-front.media-image :imagePath="$vendor->img_96x96" :alt="$vendor->name"></x-front.media-image>
                            <!-- media-image end -->
                            <div class="media-body">
                                <div class="user-title">
                                    <a href="#" class="export-link">
                                        {{ $vendor->name }}
                                        {{-- <div class="icon-holder">
                                            <!-- excel -->
                                            @include('front-inc.svg.excel')
                                            <div class="hover-notification">
                                                <!-- left-arrow -->
                                                @include('front-inc.svg.left-arrow')
                                                <span>Preuzmi izveštaj</span>
                                            </div>
                                            <!-- hover-notification end -->
                                        </div> --}}
                                        <!-- icon-holder end -->
                                    </a>
                                    <a href="{{ route('lms.account') }}" class="edit-link">
                                        {{ $vendor->email }}
                                        <!-- edit -->
                                        @include('front-inc.svg.edit')
                                    </a>
                                </div>
                                <!-- user-title end -->
                                <div class="user-data vendor-user-data">
                                    <p><strong>Ukupno vreme gledanja:</strong> <a href="#">{{ DateFormater::secondsToHumanReadable((int) $vendorEarnings->sum('total_seconds_watched')) }}</a></p>
                                    <p><strong>Predavača:</strong> <a href="#">{{ $vendor->instructors_count }}</a></p>
                                    <p><strong>Ukupna zarada:</strong> {{ number_format($vendorTotalEarnings) }} rsd.</p>
                                </div>
                                <!-- user-data end -->
                            </div>
                            <!-- media-body end -->
                        </div>
                        <!-- media end -->
                    </div>
                    <!-- hr-user-view end -->

                    <div class="hr-user-subtitle vendor-hr-user-subtitle">
                        <h2>Zarada po mesecima</h2>
                        <p>Ukupni iznos za fakturisanje se prikazuje 1. u mesecu za prethodni mesec</p>
                    </div>
                    <!-- hr-user-subtitle end -->

                    <!-- row table desktop only -->
                    <div class="row desktop-table d-none d-lg-block">

                        <div class="col-12 table-filter">
                            <div class="filter-holder">
                                @php
                                    $year = date('Y');
                                @endphp
                                <select id="selectYear" class="form-select select-pill">
                                    <option disabled="">Izaberi godinu</option>
                                    <option>Sve</option>
                                    @for ($i=0; $i<=5; $i++)
                                        <option value="{{ ($year - $i) }}"
                                            @if (request()->get('year_filter', $year) == ($year - $i))
                                                selected=""
                                            @endif
                                            >
                                            {{ ($year - $i) }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                            <!-- filter-holder end -->
                        </div>
                        <!-- table-filter end -->

                        @include('front.vendor.partials._desktop-table')
                    </div>
                    <!-- row table desktop only end -->

                    <!-- row mobile only -->
                    <div class="row d-block d-lg-none">

                        <div class="col-12 accordion-filter">
                            <div class="filter-holder">
                                {{-- @php
                                    $year = date('Y');
                                @endphp --}}
                                <select id="mobileSort" class="form-select select-pill">
                                    <option disabled="">Izaberi godinu</option>
                                    <option>Sve</option>
                                    {{-- @for ($i=0; $i<=5; $i++)
                                        <option value="{{ ($year - $i) }}"
                                            @if (request('year_filter') == ($year - $i))
                                                selected=""
                                            @endif
                                            >
                                            {{ ($year - $i) }}
                                        </option>
                                    @endfor --}}
                                    <option
                                        @if((request()->get('sort_column', 'vreme_gledanja') == 'vreme_gledanja') && (request()->get('sort_direction', 'DESC') == 'ASC'))
                                            selected=""
                                        @endif
                                        data-sort_column='vreme_gledanja'
                                        data-sort_direction='ASC'
                                        data-year_filter='{{ request()->get('year_filter', $year) }}'
                                    >
                                        Vreme gledanja naviše
                                    </option>
                                    <option
                                        @if((request()->get('sort_column', 'vreme_gledanja') == 'vreme_gledanja') && (request()->get('sort_direction', 'DESC') == 'DESC'))
                                            selected=""
                                        @endif
                                        data-sort_column='vreme_gledanja'
                                        data-sort_direction='DESC'
                                        data-year_filter='{{ request()->get('year_filter', $year) }}'
                                    >
                                        Vreme gledanja naniže
                                    </option>
                                </select>
                            </div>
                            <!-- filter-holder end -->
                        </div>
                        <!-- accordion-filter end -->

                        @include('front.vendor.partials._mobile-table')
                        <!-- col end -->

                    </div>
                    <!-- row mobile only end -->

                </div>
                <!-- main-content end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->

    </section>

    @include('front-inc._footer')

</div>
@include('front.vendor.partials._offcanvas-vendor-month-details')
@endsection

@section('add-scripts')
    @parent
    <script src="{{ mix('js/components/VendorMonthDetails.js') }}"></script>
    <script>
        document.querySelector('#selectYear').addEventListener('change', (e) => {
            e.preventDefault();
            let params = route().params
            params.year_filter = e.target.value;

            window.location.href = route(route().current(), params);
        });
    </script>
@endsection