@extends('layouts.master')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

    <style>
        .card {

            padding: 20px;
            border-radius: 10px;
        }


        .signature {
            height: 55px;
        }

        .actions {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;

        }

        .btn {
            padding: 8px 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }

        .btn-print {
            background: #198754;
            color: #fff;
        }

        .btn-excel {
            background: #0d6efd;
            color: #fff;
        }

        .btn-search {
            background: #6c757d;
            color: #fff;
        }

        .stat {
            background: #198754;
            color: #fff;
            padding: 10px;
            border-radius: 6px;
            font-weight: bold;
            width: 200px;
        }

        /* ================= ACTION BAR ================= */

        .actions-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }

        /* cards container */
        .stats-cards {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* single card */
        .stat-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 18px;
            border-radius: 12px;
            color: #fff;
            min-width: 170px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
            font-weight: bold;
        }

        /* colors */
        .stat-card.date {
            background: linear-gradient(135deg, #0d6efd, #3a86ff);
        }

        .stat-card.count {
            background: linear-gradient(135deg, #198754, #38b000);
        }

        /* icon */
        .stat-card .icon {
            font-size: 22px;
        }

        /* texts */
        .stat-card .label {
            font-size: 12px;
            opacity: .85;
        }

        .stat-card .value {
            font-size: 16px;
        }

        /* print button */
        .btn-print {
            background: #198754;
            color: #fff;
            padding: 10px 18px;
            border: none;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
            transition: .2s;
        }

        .btn-print:hover {
            transform: scale(1.05);
            background: #157347;
        }


        @media print {

            .actions,
            .dataTables_filter,
            .dataTables_length,
            .dataTables_paginate {
                display: none !important;
            }

            table {
                width: 100%;
            }

            .signature {
                height: 15px;
                background: transparent;
            }
        }
    </style>



    <div class="card">





        {{-- أزرار --}}
        {{-- ================= HEADER ACTIONS ================= --}}
        <div class="actions-bar">

            <div class="stats-cards">

                <div class="stat-card date">
                    <div class="icon">📅</div>
                    <div>
                        <div class="label">تاريخ اليوم</div>
                        <div class="value">{{ $today->format('Y-m-d') }}</div>
                    </div>
                </div>

                <div class="stat-card count">
                    <div class="icon">✍️</div>
                    <div>
                        <div class="label">توقيعات اليوم</div>
                        <div class="value">{{ $todayCount }}</div>
                    </div>
                </div>

            </div>


            <button class="btn-print" id="printBtn">
                🖨 طباعة
            </button>

        </div>




        {{-- الجدول --}}
        <table id="agreementsTable" class="table table-bordered text-center">

            <thead>
                <tr>
                    <th>#</th>
                    <th>العميل</th>
                    <th>التوقيع</th>
                    <th>التاريخ</th>
                    <th>عرض</th>
                </tr>
            </thead>

            <tbody>

                @foreach ($agreements as $a)
                    <tr>
                        <td>{{ $a->id }}</td>
                        <td>{{ $a->member->name }}</td>
                        <td>
                            <img src="{{ asset($a->signature) }}" class="signature">
                        </td>
                        <td data-order="{{ $a->signed_at->timestamp }}">
                            {{ $a->signed_at->format('Y-m-d H:i') }}
                        </td>

                        <td>
                            <a href="/agreements/print/{{ $a->id }}" class="btn btn-sm btn-primary">عرض</a>
                        </td>
                    </tr>
                @endforeach

            </tbody>

        </table>

    </div>



    {{-- ================= SCRIPTS ================= --}}

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    {{-- للطباعة --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script>

    {{-- Excel --}}
    <script src="https://cdn.jsdelivr.net/gh/rainabba/jquery-table2excel@master/src/jquery.table2excel.js"></script>



    <script>
        $(function() {

            var table = $('#agreementsTable').DataTable({

                order: [
                    [3, 'desc']
                ], // ⭐ عمود التاريخ

                columnDefs: [{
                        orderable: false,
                        targets: [2, 4]
                    } // التوقيع + عرض
                ],

                pageLength: 10
            });


            /* ================= SEARCH ================= */
            $('#searchInput').on('keyup', function() {
                table.search(this.value).draw();
            });



            /* ================= PRINT ================= */
            $('#printBtn').click(function() {

                // نخفي الأزرار مؤقتًا
                $('.actions').hide();

                window.print();

                $('.actions').show();
            });



            /* ================= EXCEL (CSV) ================= */
            $('#excelBtn').click(function() {

                let csv = [];
                let rows = document.querySelectorAll("#agreementsTable tr");

                for (let row of rows) {

                    let cols = row.querySelectorAll("td, th");

                    let rowData = [];

                    cols.forEach(col => {

                        rowData.push(
                            '"' + col.innerText.replace(/"/g, '""') + '"'
                        );

                    });

                    csv.push(rowData.join(","));
                }

                let csvFile = new Blob(
                    ["\uFEFF" + csv.join("\n")], // UTF-8 Arabic support
                    {
                        type: "text/csv;charset=utf-8;"
                    }
                );

                let link = document.createElement("a");

                link.href = URL.createObjectURL(csvFile);

                link.download = "agreements.csv";

                link.click();
            });

        });
    </script>
@endsection