@extends('tenant.pos.pos-tabs')
@php
    $activeTab = 'sales_days';
@endphp
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.pos') => '#',
            __('breadcrumb.daily_sales') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'pos.sales-days'])
@endsection

<style>
.cashier-periods-list {
    position: absolute;
    width: 45%;
    top: 15%;
    left: 27%;
    display: none;
    background: var(--backgroundColor);
    z-index: 99;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0px 0px 5px #bdbdbd;
}
.show-cashier-periods-btn {
    border: 1px solid #dfdfdf;
    width: 50%;
    padding: 3px;
    border-radius: 5px;
    transition: 0.2s;
    display: inline-block; 
    text-align: center; 
    margin: 0 auto; 
    display: block; 
}


.dark-mode .show-cashier-periods-btn {
    background: #5c5c5c;
}

.show-cashier-periods-btn:hover {
    border: 1px solid #52a8bc;
    color: #52a8bc;
}
</style>
@section('content-field')
    <div>
        <x-filter-form :title="__('breadcrumb.daily_sales')" :link="route('tenant.pos.sales-days.index')">
            <div class="row my-2">
                <div class="col-3">
                    <label for="branches" class="form-label">@lang('pos/sales-days/index.branch') :</label>
                    @php $selected_branches = request('branches_ids')?? []; @endphp
                    <select name="branches_ids[]" id="branches" multiple>
                        <option value="">@lang('general.all')</option>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}"
                                {{ in_array($branch->id, $selected_branches) ? 'selected' : '' }}>
                                {{ $branch->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-3">
                    <label for="from_date" class="form-label"> @lang('pos/sales-days/index.from_date') :</label>
                    @php $from_date = (request()->from_date)?? $active_year->from; @endphp
                    <x-input-date identifier="from_date" name="from_date" :value="$from_date"></x-input-date>
                </div>

                <div class="col-3">
                    <label for="to_date" class="form-label"> @lang('pos/sales-days/index.to_date') :</label>
                    @php $to_date = (request()->to_date)?? $active_year->to; @endphp
                <x-input-date identifier="to_date" name="to_date" :value="$to_date"></x-input-date>
                </div>

                <div class="col-3">
                    <label class="form-label">@lang('pos/sales-days/index.status') :</label>
                    @php $status_default = !request()->has('posted') && !request()->has('unposted'); @endphp

                    <div class="d-flex">
                        <div class="mx-2">
                            <label for="posted_status_filter" class="form-check-label">@lang('pos/sales-days/index.closed')</label>
                            <input type="checkbox" name="posted" id="posted_status_filter" class="custom-checkbox"
                                value="1" {{ request('posted') ? 'checked' : '' }} />
                        </div>

                        <div class="mx-2">
                            <label for="unposted_status_filter" class="form-check-label"> @lang('pos/sales-days/index.unclosed')</label>
                            <input type="checkbox" name="unposted" id="unposted_status_filter" class="custom-checkbox"
                                value="1" {{ $status_default || request('unposted') ? 'checked' : '' }} />
                        </div>
                    </div>
                </div>
            </div>
        </x-filter-form>

        <table class="table table-bordered table-striped mt-3">
            <thead>
                <tr>
                    <th> @lang('pos/sales-days/index.date')</th>
                    <th> @lang('pos/sales-days/index.branch')</th>
                    <th> @lang('pos/sales-days/index.sales')</th>
                    <th> @lang('pos/sales-days/index.returns')</th>
                    <th> @lang('pos/sales-days/index.closure_status')</th>
                    <th> @lang('pos/sales-days/index.posting_status')</th>
                    <th> @lang('pos/sales-days/index.cashiers')</th>
                    <th>@lang('general.procedures')</th>
                </tr>
            </thead>

            <tbody>
                @forelse ($days as $day)
                    <tr>
                        <td>{{ $day->day_date }}</td>
                        <td>{{ $day->branch->name }}</td>
                        <td>{{ dn($day->sales_total) }}</td>
                        <td>{{ dn($day->returned_sales_total) }}</td>
                        <td class="text-{{ $day->is_closed ? 'success' : 'danger' }}">
                            {{ $day->is_closed ? 'مغلق' : 'غير مغلق' }}
                        </td>
                        <td class="text-{{ $day->post_status ? 'success' : 'danger' }}">
                            {{ $day->post_status ? 'مرحّل' : 'غير مرحّل' }}
                        </td>
                        <td>      
                            <button class="show-cashier-periods-btn" type="button">
                                <i class="fas fa-eye"></i> @lang('pos/sales-days/index.show_chahiers')
                            </button>

                            <div class="cashier-periods-list">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <h5> @lang('pos/sales-days/index.cashiers')</h5>
                                    <button class="btn btn-outline-danger btn-sm hide-cashier-periods-btn">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>

                                <table class="table table-bordered table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>@lang('pos/sales-days/index.cashiers')</th>
                                            <th>@lang('pos/sales-days/index.status')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                        // ترتيب الـ boxes حسب التاريخ الأحدث
                                        $latestBoxes = $day->boxes->sortByDesc('created_at');
                                    
                                        // نأخذ فقط أول ظهور لكل كاشير (user_id)
                                        $uniqueBoxes = $latestBoxes->unique('user_id');
                                    @endphp
                                    
                                    @foreach($uniqueBoxes as $box)
                                        <tr>
                                            <td>{{ $box->user->full_name }}</td>
                                            <td class="text-{{ $box->is_closed == 0 ? 'success' : 'danger' }}">
                                                {{ $box->is_closed == 0 ? 'مفتوح' : 'مغلق' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    
                                    </tbody>

                                   
                                </table>
                            </div>
                          
                        </td>
                        <td>
                            <x-operations-btn>
                                @can('pos-daysSales-showDetails')
                                    <li>
                                        <a class="btn" href="{{ route('tenant.pos.sales-days.showDetails', ['box_day' => $day->id]) }}">
                                            مشاهدة الحركات
                                        </a>
                                    </li>
                                @endcan

                                @if (!$day->is_closed)
                                    @can('pos-daysSales-close')
                                        <li>
                                            <form
                                                action="{{ route('tenant.pos.sales-days.close-day', ['box_day' => $day->id]) }}"
                                                method="post">
                                                @csrf

                                                <button class="btn close-day-btn">
                                                    @lang('pos/sales-days/index.today_closure')
                                                </button>
                                            </form>
                                        </li>
                                    @endcan
                                @endif

                                @if ($day->is_closed && !$day->post_status)
                                    @can('pos-daysSales-post')
                                        <li>
                                            <form
                                                action="{{ route('tenant.pos.sales-days.post-closed-day', ['box_day' => $day->id]) }}"
                                                method="post">
                                                @csrf

                                                <button class="btn post-day-btn">
                                                    @lang('pos/sales-days/index.today_posting')
                                                </button>
                                            </form>
                                        </li>
                                    @endcan
                                @endif
                                
                                @if ($postingType === 'per_day' && is_null($day->started_fotara_at))
                                    @can('pos-daysSales-postToFotara')
                                        <li>
                                            <form
                                                action="{{ route('tenant.pos.sales-days.postToFotara', ['box_day' => $day->id]) }}"
                                                method="post">
                                                @csrf

                                                <button class="btn post-fotara-day-btn">
                                                    ترحيل إلى فوترة
                                                </button>
                                            </form>
                                        </li>
                                    @endcan
                                @endif
                            </x-operations-btn>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="100%"> @lang('pos/sales-days/index.no_results')</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection

@push('script')    
<script src="{{ asset('js/pos/cashiers/days-sales.js') }}"></script>

<script>
    $(() => {
        $('.close-day-btn').on('click', function(e) {
            e.preventDefault();
            const form = $(this).closest('form');

            $.confirm({
                title: $lang('pos.sales-days.index.confirm_close_today'),
                content:  $lang('pos.sales-days.index.will_close_today'),
                type: 'green',
                buttons: {
                    ok: {
                        text:  $lang('general.yes'),
                        btnClass: 'btn orange-btn',
                        keys: ['enter'],
                        action: () => {
                            form.trigger('submit');
                        }
                    },
                });
            });

            $('.post-fotara-day-btn').on('click', function(e) {
                e.preventDefault();
                const form = $(this).closest('form');

                $.confirm({
                    title: 'ترحيل إلى نظام فوترة',
                    content: 'هل انت متأكد, لن يتم التراجع عن الحركة !',
                    type: 'green',
                    buttons: {
                        ok: {
                            text: $lang('general.yes'),
                            btnClass: 'btn yellow-btn',
                            keys: ['enter'],
                            action: () => {
                                form.trigger('submit');
                            }
                        },
                        cancel: {
                            text: $lang('general.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc'],
                        }
                    },
                });
            });

        $('.post-day-btn').on('click', function(e) {
            e.preventDefault();
            const form = $(this).closest('form');

            $.confirm({
                title: $lang('pos.sales-days.index.confirm_post_today'),
                content:$lang('pos.sales-days.index.will_post_today'),
                type: 'green',
                buttons: {
                    ok: {
                        text: $lang('general.yes'),
                        btnClass: 'btn orange-btn',
                        keys: ['enter'],
                        action: () => {
                            form.trigger('submit');
                        }
                    },
                });
            });
        });
      
    </script>
@endpush