@extends('broker.layout.app')
@section('content')
    <link href="https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;700&display=swap" rel="stylesheet">

    <div id="header">
        <header class="w-100 float-start">
            <div class="main-header w-100 float-start">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-lg-2 col-6 p-0">
                            <div class="main-header-logo">
                                <a href="#">
                                    <img src="{{asset('images/logo.png')}}" class="img-fluid" alt="logo">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>

    <div class="main-innerpage w-100 float-start">
        <div class="container">
            <div class="innerpages">
                <h2>Broker Dashboard</h2>
                <span>Home > <span class="font-color-pink">Dashboard</span></span>
            </div>
        </div>
    </div>


    <div class="blog-page pt-5 pb-5 w-100 float-start">
        <div class="container">

            <div class="row">

                @include('broker.layout.sidebar')

                <div class="col-lg-8 col-md-12 col-12">
                    <div class="my-profile">
{{--                        <div class="d-flex justify-content-end mb-3">--}}
{{--                            <button id="downloadCsvButton" class="btn btn-success">Download Excel File</button>--}}
{{--                        </div>--}}

                        <br>

                        <!-- Referral Agent Section -->
                        @if(!empty($entries))

                            <div id="referralAgentSection" class="content-section">
                                <h2>Referral <strong>Agent</strong></h2>

                                <table id="referralAgentTable" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($entries as $entryID => $userMeta)
                                        @php
                                            // Convert meta data into an associative array for easy access
                                            $userData = [];
                                            foreach ($userMeta as $meta) {
                                                $userData[$meta->meta_key] = $meta->meta_value;
                                            }
                                        @endphp

                                        <tr>
                                            <td>{{ $userData['12'] ?? 'N/A' }}</td>
                                            <td>{{ $userData['13'] ?? 'N/A' }}</td>
                                            <td>{{ $userData['2'] ?? 'N/A' }}</td>
                                            <td>
                                                <a href="{{ route('broker.agent.edit.data', ['id' => $entryID]) }}"
                                                   class="btn btn-primary btn-sm">
                                                    Edit
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif

                    <!-- Partner Agent Section -->
                        @if(!empty($partnerEntries))
                            <div id="partnerAgentSection" class="content-section" style="display: none;">
                                <h2>Partner <strong>Agent</strong></h2>

                                <table id="partnerAgentTable" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($partnerEntries as $entryID => $userMeta)
                                        @php
                                            // Convert meta data into an associative array for easy access
                                            $userData = [];
                                            foreach ($userMeta as $meta) {
                                                $userData[$meta->meta_key] = $meta->meta_value;
                                            }
                                        @endphp

                                        <tr>
                                            <td>{{ $userData['1.3'] ?? 'N/A' }}</td>
                                            <td>{{ $userData['1.6'] ?? 'N/A' }}</td>
                                            <td>{{ $userData['2'] ?? 'N/A' }}</td>
                                            <td>
                                                <a href="{{ route('broker.agent.edit.data', ['id' => $entryID]) }}"
                                                   class="btn btn-primary btn-sm">
                                                    Edit
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif

                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- CSV Download Modal -->
    <div class="modal fade" id="csvModal" tabindex="-1" aria-labelledby="csvModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="csvModalLabel">Download CSV</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="startRow">Start Row:</label>
                    <input type="number" id="startRow" class="form-control" min="1">

                    <label for="endRow" class="mt-2">End Row:</label>
                    <input type="number" id="endRow" class="form-control" min="1">

                    <label for="tableSelect" class="mt-2">Select Table:</label>
                    <select id="tableSelect" class="form-control">
                        <option value="referralAgentTable">Referral Agent Table</option>
                        <option value="partnerAgentTable">Partner Agent Table</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="generateCsv" class="btn btn-primary">Download CSV</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('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>
        $(document).ready(function () {
            // Initialize DataTables only if tables exist
            if ($('#referralAgentTable').length) {
                $('#referralAgentTable').DataTable({
                    "paging": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "lengthMenu": [10, 25, 50, 100],
                    "language": {
                        "search": "Search records:",
                        "lengthMenu": "Show _MENU_ entries",
                        "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                    }
                });
            }

            if ($('#partnerAgentTable').length) {
                $('#partnerAgentTable').DataTable({
                    "paging": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "lengthMenu": [10, 25, 50, 100],
                    "language": {
                        "search": "Search records:",
                        "lengthMenu": "Show _MENU_ entries",
                        "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                    }
                });
            }

            // Toggle Sections
            $("#showReferral").click(function () {
                $("#referralAgentSection").show();
                $("#partnerAgentSection").hide();
                $("#showReferral").addClass("active");
                $("#showPartner").removeClass("active");
            });

            $("#showPartner").click(function () {
                $("#partnerAgentSection").show();
                $("#referralAgentSection").hide();
                $("#showPartner").addClass("active");
                $("#showReferral").removeClass("active");
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            const downloadButton = document.getElementById('downloadCsvButton');
            const generateCsvButton = document.getElementById('generateCsv');

            // Show the modal when the download button is clicked
            downloadButton.addEventListener('click', function () {
                $('#csvModal').modal('show');
            });

            // Handle CSV Generation
            generateCsvButton.addEventListener('click', function () {
                const startRow = parseInt(document.getElementById('startRow').value);
                const endRow = parseInt(document.getElementById('endRow').value);
                const tableId = document.getElementById('tableSelect').value;

                if (isNaN(startRow) || isNaN(endRow) || startRow <= 0 || endRow <= 0 || startRow > endRow) {
                    alert('Please enter valid start and end rows.');
                    return;
                }

                const table = document.getElementById(tableId);
                const headers = table.querySelectorAll('thead th');
                const rows = table.querySelectorAll('tbody tr');
                let csvContent = '';

                // Add headers to CSV
                let headerData = [];
                headers.forEach(header => {
                    headerData.push(`"${header.innerText.trim()}"`);
                });
                csvContent += headerData.join(',') + '\n';

                // Add rows to CSV
                rows.forEach((row, rowIndex) => {
                    if (rowIndex + 1 >= startRow && rowIndex + 1 <= endRow) {
                        const cells = row.querySelectorAll('td');
                        let rowData = [];
                        cells.forEach(cell => {
                            rowData.push(`"${cell.innerText.trim()}"`);
                        });
                        csvContent += rowData.join(',') + '\n';
                    }
                });

                if (csvContent === '') {
                    alert('No rows found in the specified range.');
                    return;
                }

                // Create and Download CSV File
                const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = tableId + '_registered_list.csv';
                link.click();

                $('#csvModal').modal('hide');
            });
        });
    </script>
@endpush