@extends('layouts.master')
@section('title', 'تقرير المدفوعات')

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
    <style>
        .card {
            background: transparent
        }

        .status-card {
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .03);
            color: inherit;
            border-radius: 14px;
            padding: 10px 14px;
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            cursor: pointer;
            transition: .15s;
            backdrop-filter: blur(6px);
        }

        .status-card:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, .06);
        }

        .status-card .lbl {
            font-weight: 900;
            font-size: 13px;
            opacity: .95;
        }

        .status-card .cnt {
            font-weight: 900;
            font-size: 13px;
            padding: 2px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .18);
            background: rgba(0, 0, 0, .15);
        }

        .status-card.active {
            outline: 2px solid rgba(13, 110, 253, .65);
            background: rgba(13, 110, 253, .12);
        }

        /* ✅ النشط حاليا لون مختلف */
        .status-card.is-active-now {
            background: rgba(25, 135, 84, .16);
            border-color: rgba(25, 135, 84, .35);
        }

        .status-card.is-active-now.active {
            outline: 2px solid rgba(25, 135, 84, .75);
            background: rgba(25, 135, 84, .22);
        }
    </style>
@endsection

@section('content')
    <div class="container ">

        <div class="d-flex flex-wrap gap-3 align-items-end mb-3">
            <div>
                <label class="form-label small mb-1">من تاريخ</label>
                <input type="date" id="from" class="form-control form-control-sm">
            </div>

            <div>
                <label class="form-label small mb-1">إلى تاريخ</label>
                <input type="date" id="to" class="form-control form-control-sm">
            </div>

            <div style="min-width:260px">
                <label class="form-label small mb-1">بحث</label>
                <input type="text" id="q" class="form-control form-control-sm"
                    placeholder="عضو / فاتورة / طريقة دفع">
            </div>



            <div class="ms-auto d-flex gap-2">
                <button class="btn  btn-primary" id="btnApply">تطبيق</button>
                <button class="btn  btn-outline-secondary" id="btnReset">مسح</button>
                <button id="btnExportExcel" class="btn btn-success ">
                    Excel
                </button>
                {{-- <button id="btnPrint" class="btn btn-danger">طباعة</button> --}}
            </div>
        </div>

        <div class="card ">
            <div class="table-responsive">
                <table id="reportTable" class="table  table-striped text-center align-middle">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>تاريخ</th>
                            <th>رقم العضو</th>
                            <th>اسم العضو</th>
                            <th>رقم الفاتورة</th>
                            <th> بداية الاشتراك</th>
                            <th> نهاية الاشتراك</th>
                            <th>طريقة الدفع</th>
                            <th>قبل الضريبة</th>
                            <th>الضريبة</th>
                            <th>الإجمالي</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
@endsection

@section('js')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>

    {{-- Buttons (Excel / Print) --}}
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

    {{-- Excel dependencies --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">



    <script>
        function filters() {
            return {
                from: $('#from').val(),
                to: $('#to').val(),
                q: $('#q').val(),
            };
        }

        const table = $('#reportTable').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 25,
            dom: 'Bfrtip', // Buttons فوق
            buttons: [
                // {
                //     extend: 'excelHtml5',
                //     text: 'Excel',
                //     title: 'Payments Report'
                // },
                // {
                //     extend: 'print',
                //     text: 'طباعة',
                //     title: 'تقرير المدفوعات'
                // }
            ],
            ajax: {
                url: "{{ route('payments.report.data') }}",
                data: function(d) {
                    Object.assign(d, filters());
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at'
                },
                {
                    data: 'member_code'
                },
                {
                    data: 'member_name'
                },
                {
                    data: 'invoice_no'
                }, {
                    data: 'start_date'
                }, // ✅ بداية
                {
                    data: 'end_date'
                },
                {
                    data: 'payment_method'
                },
                {
                    data: 'subtotal'
                }, // ✅ جديد (محسوب)
                {
                    data: 'tax'
                },
                {
                    data: 'total'
                }

            ],
        });

        $('#btnApply').on('click', function() {
            table.draw();
        });

        $('#btnReset').on('click', function() {
            $('#from,#to,#q').val('');
            table.draw();
        });

        // لايف بحث
        let t = null;
        $('#q').on('input', function() {
            clearTimeout(t);
            t = setTimeout(() => table.draw(), 250);
        });

        $('#btnExportExcel').on('click', function() {

            const from = $('#from').val() || '';
            const to = $('#to').val() || '';
            const q = $('#q').val() || '';
            const pm = $('#fPayMethod').val() || '';

            const params = {
                from: from,
                to: to,
                q: q,
                pay_method_id: pm
            };

            $.get("{{ route('reports.payments.export_json') }}", params)
                .done(function(res) {

                    if (!res || !res.ok) {
                        // toast('تعذر تجهيز ملف التصدير', 'danger');
                        alert('تعذر الاتصال بالسيرفر');
                        return;
                    }

                    const header = [
                        "#",
                        "تاريخ",
                        "رقم العضو",
                        "اسم العضو",
                        "رقم الفاتورة",
                        "بداية الاشتراك", "نهاية الاشتراك", // ✅ جديد
                        "طريقة الدفع",
                        "قبل الضريبة",
                        "الضريبة",
                        "الإجمالي"
                    ];

                    const data = (res.data || []).map((r, i) => ([
                        i + 1,
                        r.date ?? "",
                        r.member_code ?? "",
                        r.member_name ?? "",
                        r.invoice_no ?? "",
                        r.start_date ?? "", // ✅
                        r.end_date ?? "", // ✅
                        r.pay_method ?? "",
                        r.subtotal ?? 0,
                        r.tax ?? 0,
                        r.total ?? 0,
                    ]));

                    const ws = XLSX.utils.aoa_to_sheet([header, ...data]);
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, "Report");

                    // ✅ اسم الملف بعد تجهيز كل حاجة
                    let fname = "تقرير_المدفوعات";

                    if (from || to)
                        fname += `_من_${from || '...'}_الى_${to || '...'}`;

                    if (pm)
                        fname += `_طريقة_${pm}`;

                    if (q)
                        fname += `_بحث`;

                    fname += ".xlsx";

                    XLSX.writeFile(wb, fname);

                })
                .fail(function() {
                    alert('تعذر الاتصال بالسيرفر');
                });

        });

        // $(document).on('click', '#btnPrint', function() {

        //     const from = $('#from').val() || '';
        //     const to = $('#to').val() || '';
        //     const q = $('#q').val() || '';
        //     const pm = $('#fPayMethod').val() || '';

        //     const url = "{{ route('reports.payments.print') }}" + "?" + $.param({
        //         from: from,
        //         to: to,
        //         q: q,
        //         pay_method_id: pm
        //     });

        //     let iframe = document.getElementById('printFrame');
        //     if (!iframe) {
        //         iframe = document.createElement('iframe');
        //         iframe.id = 'printFrame';
        //         iframe.style.position = 'fixed';
        //         iframe.style.right = '0';
        //         iframe.style.bottom = '0';
        //         iframe.style.width = '0';
        //         iframe.style.height = '0';
        //         iframe.style.border = '0';
        //         document.body.appendChild(iframe);
        //     }

        //     iframe.onload = function() {
        //         iframe.contentWindow.focus();
        //         iframe.contentWindow.print();
        //     };

        //     iframe.src = url;
        // });
    </script>
@endsection