@extends('admin.layouts.master')
@section('title', 'شفتات الكاشير')

@section('content')
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">
            <div class="content-header d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1"><i class="ti ti-clock me-1"></i> إدارة شفتات الكاشير</h4>
                    <p class="text-muted mb-0">متابعة الورديات المفتوحة والمغلقة مع مؤشرات دقيقة للفروقات والمدفوعات والمبيعات.</p>
                </div>
                @can('shifts.open')
                    <a href="{{ route('admin.shifts.create') }}" class="btn btn-primary {{ $activeUserShift ? 'disabled' : '' }}">
                        <i class="ti ti-plus me-1"></i> فتح شفت جديد
                    </a>
                @endcan
            </div>

            <div id="shifts-alert-box" class="mb-3"></div>

            <div class="row g-3 mb-4">
                <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-2">الشفتات المفتوحة</p><h4 class="text-success mb-0">{{ number_format($stats['open']) }}</h4></div></div></div>
                <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-2">الشفتات المغلقة</p><h4 class="text-secondary mb-0">{{ number_format($stats['closed']) }}</h4></div></div></div>
                <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-2">إجمالي الشفتات</p><h4 class="text-primary mb-0">{{ number_format($stats['total']) }}</h4></div></div></div>
                <div class="col-md-3 col-sm-6"><div class="card shadow-sm border-0 h-100"><div class="card-body"><p class="text-muted mb-2">شفتات بها فرق</p><h4 class="text-warning mb-0">{{ number_format($stats['with_difference']) }}</h4></div></div></div>
            </div>

            <div class="card mb-3 shadow-sm border-0">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">الحالة</label>
                            <select id="filter-status" class="form-select">
                                <option value="all">الكل</option>
                                <option value="open">مفتوح</option>
                                <option value="closed">مغلق</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">الصندوق</label>
                            <select id="filter-cash-register" class="form-select">
                                <option value="">الكل</option>
                                @foreach($cashRegisters as $cashRegister)
                                    <option value="{{ $cashRegister->id }}">{{ $cashRegister->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">المستخدم</label>
                            <select id="filter-user" class="form-select">
                                <option value="">الكل</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="shifts-table" class="table table-hover align-middle w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>المستخدم</th>
                                    <th>الصندوق</th>
                                    <th>الحالة</th>
                                    <th>رصيد الفتح</th>
                                    <th>رصيد الإغلاق</th>
                                    <th>الفرق</th>
                                    <th>مبيعات</th>
                                    <th>مدفوعات</th>
                                    <th>وقت الفتح</th>
                                    <th>وقت الإغلاق</th>
                                    <th class="text-center">الإجراءات</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteShiftModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">تأكيد الحذف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
            </div>
            <div class="modal-body">هل أنت متأكد من حذف الشفت <span class="fw-bold" id="deleteShiftId"></span>؟</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteShift">حذف نهائي</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    const csrfToken = '{{ csrf_token() }}';
    let pendingDeleteUrl = null;

    function showAlert(type, message) {
        $('#shifts-alert-box').html(
            '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">'
            + '<i class="ti ti-info-circle me-1"></i>' + message
            + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="إغلاق"></button>'
            + '</div>'
        );
    }

    const table = $('#shifts-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        ajax: {
            url: '{{ route('admin.shifts.index') }}',
            data: function (d) {
                d.status_filter = $('#filter-status').val();
                d.cash_register_id = $('#filter-cash-register').val();
                d.user_id = $('#filter-user').val();
            }
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'user', name: 'user'},
            {data: 'cash_register', name: 'cash_register'},
            {data: 'status', name: 'status', orderable: false, searchable: false},
            {data: 'opening_balance', name: 'opening_balance', className: 'text-end'},
            {data: 'closing_balance', name: 'closing_balance', className: 'text-end'},
            {data: 'difference_amount', name: 'difference_amount', className: 'text-end'},
            {
                data: 'sales_count',
                name: 'sales_count',
                orderable: false,
                searchable: false,
                className: 'text-center',
                render: function (data) { return '<span class="badge bg-light-primary text-primary">' + Number(data || 0) + '</span>'; }
            },
            {
                data: 'payments_count',
                name: 'payments_count',
                orderable: false,
                searchable: false,
                className: 'text-center',
                render: function (data) { return '<span class="badge bg-light-info text-info">' + Number(data || 0) + '</span>'; }
            },
            {data: 'opened_at', name: 'opened_at'},
            {data: 'closed_at', name: 'closed_at'},
            {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center'}
        ],
        drawCallback: function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        }
    });

    $('#filter-status, #filter-cash-register, #filter-user').on('change', function () {
        table.ajax.reload();
    });

    const deleteModal = new bootstrap.Modal(document.getElementById('deleteShiftModal'));

    $(document).on('click', '.btn-delete-shift', function () {
        pendingDeleteUrl = $(this).data('url');
        $('#deleteShiftId').text('#' + $(this).data('id'));
        deleteModal.show();
    });

    $('#confirmDeleteShift').on('click', function () {
        if (!pendingDeleteUrl) {
            return;
        }

        const form = $('<form>', { method: 'POST', action: pendingDeleteUrl })
            .append($('<input>', { type: 'hidden', name: '_token', value: csrfToken }))
            .append($('<input>', { type: 'hidden', name: '_method', value: 'DELETE' }));

        $('body').append(form);
        form.trigger('submit');
    });

    @if(session('error'))
    showAlert('danger', @json(session('error')));
    @endif

    @if(session('success'))
    showAlert('success', @json(session('success')));
    @endif

    @if(session('info'))
    showAlert('info', @json(session('info')));
    @endif

    @if($activeUserShift)
    showAlert('warning', 'لديك شفت مفتوح حالياً. قم بإغلاقه قبل فتح شفت جديد.');
    @endif
});
</script>
@endpush