@extends('dashboard.layouts.app')

@section('title', __('dashboard.Earnings'))
@section('page_heading', __('dashboard.Earnings'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item">
        <span class="bullet bg-gray-500 w-5px h-2px"></span>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Earnings') }}</li>
@endsection

@section('content')

    <div class="row g-7">
        <div class="col-xl-12">
            <div class="card card-flush h-lg-100">
                <div class="card-header pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-gray-800">{{ __('dashboard.Earnings') }}</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">
                            {{ trans_choice('dashboard.earning_count', $earnings->total(), ['count' => $earnings->total()]) }}
                        </span>
                    </h3>
                    <div class="card-toolbar">
                        <button type="button" class="btn btn-sm btn-light-primary me-2" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                            {{--   تعديل الأيقونة هنا --}}
                            <i class="bi bi-funnel-fill fs-5 me-1"></i>
                            {{ __('dashboard.Actions') }}
                        </button>
                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
                            <div class="menu-item px-3">
                                <a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#settle_earnings_modal">
                                    {{ __('dashboard.Settle Earnings') }}
                                </a>
                            </div>
                            <div class="menu-item px-3">
                                <a href="{{ route('dashboard.earnings.mark-as-due') }}" class="menu-link px-3">
                                    {{ __('dashboard.Mark as Due') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- إضافة فورم البحث والفلترة --}}
                <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                    <form action="{{ route('dashboard.earnings.index') }}" method="GET" class="w-100">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label for="user_id" class="form-label">{{ __('dashboard.User') }}</label>
                                    <select name="user_id" id="user_id" class="form-select select2-user">
                                        <option value="">{{ __('dashboard.All Users') }}</option>
                                        @if(request('user_id'))
                                            @php
                                                $selectedUser = \App\Models\User::find(request('user_id'));
                                            @endphp
                                            @if($selectedUser)
                                                <option value="{{ $selectedUser->id }}" selected>{{ $selectedUser->name }} ({{ $selectedUser->email }})</option>
                                            @endif
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label for="shipment_ids" class="form-label">{{ __('dashboard.Shipment IDs') }}</label>
                                    <select name="shipment_ids" id="shipment_ids" class="form-select select2-shipments" multiple>
                                        @if(request('shipment_ids'))
                                            @php
                                                $selectedShipmentIds = explode(',', request('shipment_ids'));
                                                $selectedShipments = \App\Models\OrderShipment::whereIn('id', $selectedShipmentIds)->get();
                                            @endphp
                                            @foreach($selectedShipments as $shipment)
                                                <option value="{{ $shipment->id }}" selected>Shipment ID: {{ $shipment->id }} (Order ID: {{ $shipment->order_id }})</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label for="status" class="form-label">{{ __('dashboard.Status') }}</label>
                                    <select name="status" id="status" class="form-select">
                                        <option value="">{{ __('dashboard.All Statuses') }}</option>
                                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>{{ __('dashboard.Pending') }}</option>
                                        <option value="due" {{ request('status') == 'due' ? 'selected' : '' }}>{{ __('dashboard.Due') }}</option>
                                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>{{ __('dashboard.Paid') }}</option>
                                    </select>
                                </div>
                            </div>
                              <div class="col-md-3">
                                <div class="mb-4">
                                    <label for="due_date_from" class="form-label">{{ __('dashboard.Due Date From') }}</label>
                                    <input type="date" name="due_date_from" id="due_date_from" class="form-control" value="{{ request('due_date_from') }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-4">
                                    <label for="due_date_to" class="form-label">{{ __('dashboard.Due Date To') }}</label>
                                    <input type="date" name="due_date_to" id="due_date_to" class="form-control" value="{{ request('due_date_to') }}">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary mt-8">{{ __('dashboard.Filter') }}</button>
                                @if(request()->has('user_id') || request()->has('shipment_ids') || request()->has('status') || request()->has('due_date_from') || request()->has('due_date_to'))
                                    <a href="{{ route('dashboard.earnings.index') }}" class="btn btn-light mt-8">{{ __('dashboard.Clear') }}</a>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
                {{-- نهاية فورم البحث والفلترة --}}

                <div class="card-body pt-6">
                    @if($earnings->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                                <thead>
                                    <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
                                        <th class="p-0 pb-3 min-w-50px text-start">
                                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="1" data-kt-check="true" data-kt-check-target=".widget-9-check" />
                                            </div>
                                        </th>
                                        <th class="p-0 pb-3 min-w-50px text-start">{{ __('dashboard.ID') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.User') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Coupon') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Shipment') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Order') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Amount') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Commission Percentage') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Due Date') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Status') }}</th>
                                        <th class="p-0 pb-3 min-w-100px">{{ __('dashboard.Notes') }}</th>
                                        <th class="p-0 pb-3 min-w-100px text-end">{{ __('dashboard.Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($earnings as $earning)
                                        <tr>
                                            <td>
                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                    <input class="form-check-input widget-9-check earning_checkbox" type="checkbox" value="{{ $earning->id }}" />
                                                </div>
                                            </td>
                                            <td>
                                                <span class="text-gray-600 fw-bold fs-6">{{ $earning->id }}</span>
                                            </td>
                                            <td>
                                                <a href="{{ route('dashboard.users.show', $earning->user) }}" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{ $earning->user->name }}</a>
                                            </td>
                                            <td>
                                                @if ($earning->coupon)
                                                    <a href="{{ route('dashboard.coupons.show', $earning->coupon) }}" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{ $earning->coupon->code }}</a>
                                                @else
                                                    <span class="text-gray-600 fw-bold fs-6">{{ __('dashboard.N/A') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('dashboard.orders.shipments.show', [$earning->shipment->order, $earning->shipment]) }}" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">#{{ $earning->shipment->id }}</a>
                                            </td>
                                             <td>
                                                <a href="{{ route('dashboard.orders.show', $earning->shipment->order) }}" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">#{{ $earning->shipment->order->id }}</a>
                                            </td>
                                            <td>
                                                <span class="text-gray-800 fw-bold fs-6">{{ $earning->amount }}</span>
                                            </td>
                                            <td>
                                                <span class="text-gray-600 fw-bold fs-6">{{ $earning->commission_percentage }}%</span>
                                            </td>
                                            <td>
                                                <span class="text-gray-600 fw-bold fs-6">{{ $earning->due_date->format('Y-m-d') }}</span>
                                            </td>
                                            <td>
                                                @if ($earning->status == 'pending')
                                                    <span class="badge badge-light-warning">{{ __('dashboard.Pending') }}</span>
                                                @elseif ($earning->status == 'due')
                                                    <span class="badge badge-light-primary">{{ __('dashboard.Due') }}</span>
                                                @elseif ($earning->status == 'paid')
                                                    <span class="badge badge-light-success">{{ __('dashboard.Paid') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="text-gray-600 fw-bold fs-6">{{ $earning->notes ?? '---' }}</span>
                                            </td>
                                            <td class="text-end">
                                                <div class="d-flex justify-content-end flex-shrink-0">
                                                    <a href="{{ route('dashboard.earnings.edit', $earning) }}" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1">
                                                        <i class="bi bi-pencil-square fs-3"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        {{--  عرض روابط التنقل بين الصفحات  --}}
                        <div class="mt-4">
                            {{ $earnings->links() }}
                        </div>
                    @else
                        <div class="alert alert-warning">
                            {{ __('dashboard.No earnings found.') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{--  نافذة تأكيد تسوية الأرباح  --}}
    <div class="modal fade" tabindex="-1" id="settle_earnings_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{__('dashboard.Settle Earnings')}}</h3>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="bi bi-x-lg"></i>
                    </div>
                </div>
                <form action="{{ route('dashboard.earnings.settle') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <p>{{__('dashboard.Are you sure you want to settle the selected earnings?')}}</p>
                        <input type="hidden" name="earning_ids" id="earning_ids_input">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{__('dashboard.Cancel')}}</button>
                        <button type="submit" class="btn btn-primary">{{__('dashboard.Settle')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            // تفعيل الـSelect2 لحقل المستخدمين
            $('.select2-user').select2({
                ajax: {
                    url: '{{ route("dashboard.earnings.search.users") }}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term, // search term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.results
                        };
                    },
                    cache: true
                },
                placeholder: '{{ __("dashboard.Choose User") }}',
                allowClear: true,
                dir: "rtl",
                language: "ar",
            });

            // تفعيل الـSelect2 لحقل الشحنات
            $('.select2-shipments').select2({
                ajax: {
                    url: '{{ route("dashboard.earnings.search.shipments") }}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term, // search term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.results
                        };
                    },
                    cache: true
                },
                placeholder: '{{ __("dashboard.Choose Shipments") }}',
                allowClear: true,
                multiple: true, // السماح باختيار أكثر من شحنة
                dir: "rtl",
                language: "ar",
            });

            // عند فتح نافذة التأكيد، قم بتحديث حقل الإدخال earning_ids_input
            $('#settle_earnings_modal').on('show.bs.modal', function (event) {
                var selectedEarnings = [];
                $('.earning_checkbox:checked').each(function () {
                    selectedEarnings.push($(this).val());
                });

                if (selectedEarnings.length === 0) {
                    event.preventDefault(); // منع فتح النافذة
                    Swal.fire({
                        text: "{{ __('dashboard.Please select at least one earning to settle.') }}",
                        icon: "warning",
                        buttonsStyling: false,
                        confirmButtonText: "{{ __('dashboard.Ok, got it!') }}",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                } else {
                    $('#earning_ids_input').val(selectedEarnings.join(','));
                }
            });

            // عند تغيير تحديد checkbox، قم بتفعيل/تعطيل زر "تسوية الأرباح"
            $(document).on('change', '.earning_checkbox', function() {
                var anyChecked = $('.earning_checkbox:checked').length > 0;
                $('#settle_earnings_button').prop('disabled', !anyChecked);
            });
        });

        function confirmDelete(formId) {
            Swal.fire({
                title: "{{ __('dashboard.Are you sure?') }}",
                text: "{{ __('dashboard.You will not be able to revert this!') }}",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "{{ __('dashboard.Yes, delete it!') }}",
                cancelButtonText: "{{ __('dashboard.Cancel') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById(formId).submit();
                }
            });
        }
    </script>
@endsection