@extends('layouts.app')

@section('title', __('master::lang.master') . ' | ' . __('master::lang.payments'))

@section('content')
@include('master::layouts.nav')

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">{{ __('master::lang.successful_payments') }}</h1>
</section>

<section class="content">
    <div class="tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm tw-rounded-xl tw-ring-1 hover:tw-shadow-md tw-ring-gray-200 tw-p-4 sm:tw-p-5">

        <!-- فلاتر العميل والتاريخ -->
        <div class="tw-flex tw-items-center tw-gap-4 tw-mb-4">
            <div>
                <label>{{ __('master::lang.client') }}:</label>
                <select id="filter_client" class="form-control">
                    <option value="">{{ __('master::lang.all') }}</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}">{{ $client->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label>{{ __('master::lang.date_range') }}:</label>
                <input type="text" id="filter_date_range" class="form-control" placeholder="{{ __('master::lang.date_range') }}" autocomplete="off">
            </div>

            <div class="tw-flex tw-gap-2 tw-items-end" style="margin-top: 25px;">
                <button id="filter_button" class="btn tw-text-white hover:tw-opacity-90" style="background-color: {{ session('business.theme_color') }};">
                    {{ __('master::lang.filter') }}
                </button>
                <button id="reset_button" class="btn tw-bg-gray-300 tw-text-black hover:tw-bg-gray-400" style="background-color: rgb(163, 163, 163); color: white;">
                    {{ __('master::lang.reset') }}
                </button>
            </div>
        </div>

        <!-- جدول الدفعات -->
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="payments_table">
                <thead>
                    <tr>
                        <th>{{ __('master::lang.client') }}</th>
                        <th>{{ __('master::lang.subdomain') }}</th>
                        <th>{{ __('master::lang.amount') }}</th>
                        <th>{{ __('master::lang.status') }}</th>
                        <th>{{ __('master::lang.paid_at') }}</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>
</section>
@endsection

@section('javascript')
<!-- Flatpickr CSS/JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script type="text/javascript">
$(document).ready(function() {

    // تفعيل Flatpickr لاختيار نطاق التواريخ
    flatpickr("#filter_date_range", {
        mode: "range",
        dateFormat: "Y-m-d",
        locale: "{{ app()->getLocale() }}"
    });

    var table = $('#payments_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ action([\Modules\Master\Http\Controllers\PaymentsController::class, 'index']) }}",
            data: function(d) {
                d.client_id = $('#filter_client').val();

                // قراءة نطاق التاريخ من Flatpickr
                let dates = $('#filter_date_range').val().split(" to ");
                d.start_date = dates[0] || '';
                d.end_date = dates[1] || '';
            }
        },
        columns: [
            { data: 'client_name', name: 'client_name' },
            { data: 'subdomain', name: 'subdomain' },
            { data: 'amount', name: 'amount' },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'paid_at', name: 'paid_at' },
        ],
        order: [[4, 'desc']]
    });

    $('#filter_button').click(function() {
        table.ajax.reload();
    });

    $('#reset_button').click(function() {
        $('#filter_client').val('');
        $('#filter_date_range').val('');
        table.ajax.reload();
    });

});
</script>
@endsection