@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Subjects</title>
<!-- Your custom export logic -->
<script src="{{ asset('assets/js/export-table.js') }}"></script>
@section('main-content')
    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242B !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }
    </style>
    <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Subject deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl container-p-y row">
            <div class="col-6">
                <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Records /</span> Transaction</h4>
            </div>
            <!-- Basic Bootstrap Table -->
            <div class="card">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mt-2">Transaction List</h5>
                    <x-export-dropdown table-id="services" filename="Transaction_list" />
                </div>
                @include('components.datefilter')
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="services">
                        <thead>
                            <tr>
                                <th class="">S.No</th>
                                <th class="ps-2">Student Name</th>
                                <th class="ps-2">Parent Name</th>
                                <th class="ps-2">Transaction Amount</th>
                                <th class="ps-2">Transaction Date</th>
                                <th class="ps-2">Transaction Type</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (count($transactions) != 0)
                                @php
                                    $count = 0;
                                @endphp
                                @foreach ($transactions as $key => $transaction)
                                    @if (!$transaction->student)
                                        @continue;
                                    @endif
                                    <tr id="row_{{ $transaction->id }}">
                                        <td class="">{{ $count + 1 }}</td>
                                        @php
                                            $count++;
                                        @endphp
                                        <td class="ps-2 name{{ $transaction->id }}">
                                            {{ ucwords($transaction->student->first_name) }}
                                            {{ ucwords($transaction->student->last_name) }}</td>
                                        <td class="ps-2 name{{ $transaction->id }}">
                                            @if (isset($transaction->student->parent))
                                                {{ ucwords($transaction->student->parent->first_name) }}
                                                {{ ucwords($transaction->student->parent->last_name) }}
                                            @endif
                                        </td>
                                        <td class="ps-2 name{{ $transaction->id }}">
                                            {{ ucwords($transaction->amountpaid) }}
                                        </td>
                                        <td class="ps-2 name{{ $transaction->id }}">
                                            {{ ucwords($transaction->created_at->format('d-m-y')) }} </td>
                                        <td class="ps-2 name{{ $transaction->id }}">
                                            {{ ucwords($transaction->Transaction_type) }}
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>

                                    <td colspan="6" style="text-align: center"><span>{{ 'No record found' }}</span></td>

                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- / Content -->
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const dateFilterDropdown = document.getElementById("dateFilterDropdown");
            const applyDateFilterBtn = document.getElementById("applyDateFilterBtn");
            const startDateInput = document.getElementById("startDate");
            const endDateInput = document.getElementById("endDate");

            // Initialize DataTable
            let table = $('#services').DataTable();

            // Add custom search filter for date range
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                let startDate = startDateInput.value;
                let endDate = endDateInput.value;
                let receiptDateStr = data[4]; // 5th column → index 4 (Transaction Date)

                if (!startDate || !endDate) return true; // if no filter, show all

                // Convert input dates
                let start = new Date(startDate);
                let end = new Date(endDate);

                // Convert table date "dd-mm-yy" to Date object
                let parts = receiptDateStr.split("-");
                if (parts.length !== 3) return true;

                let year = parts[2].length === 2 ? "20" + parts[2] : parts[2];
                let formattedDate = new Date(year, parts[1] - 1, parts[0]);

                return formattedDate >= start && formattedDate <= end;
            });

            // Apply filter on button click
            applyDateFilterBtn.addEventListener("click", function() {
                let startDate = startDateInput.value;
                let endDate = endDateInput.value;

                if (!startDate || !endDate) {
                    alert("Please select both start and end dates.");
                    return;
                }

                table.draw(); // re-draw with filter applied

                // Update button label
                document.getElementById("displayDateRange").innerText =
                    `${startDate} → ${endDate}`;

                // Close dropdown
                const dropdown = bootstrap.Dropdown.getInstance(dateFilterDropdown);
                if (dropdown) dropdown.hide();
            });
        });
    </script>


@endsection