@extends('layouts.app')

@section('content')
<div class="container-fluid mt-4">
    <div class="card my-custom-margin">
        <div class="card-header">
            <div class="row g-2 justify-content-between align-items-center">
                <div class="col-12 col-md-auto">
                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#formModal">
                            <i class="bi bi-plus-lg me-1"></i> New Source
                        </button>
                         <div class="dropdown">
                <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-upload me-1"></i> Export
                </button>
                <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                    <li><button class="dropdown-item" id="exportExcel">Excel</button></li>
                    <li><button class="dropdown-item" id="exportCSV">CSV</button></li>
                    <li><button class="dropdown-item" id="exportPDF">PDF</button></li>
                    <li><button class="dropdown-item" id="exportPrint">Print</button></li>
                </ul>
            </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="row mb-3 g-2 align-items-center">
                <div class="col-12 col-md-6 d-flex flex-wrap align-items-center gap-2">
                   <label for="entries" class="show" style="margin-left: 24px;">Show</label>
                    <select id="entries" class="form-select form-select-sm" style="max-width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="-1">All</option>
                    </select>
                    <span class="mb-0">entries</span>
                </div>
                <div class="col-12 col-md-6 d-flex flex-wrap justify-content-md-end align-items-center gap-2">
                    <label for="search" class="form-label mb-0">Search:</label>
                    <input type="text" id="search" class="form-control form-control-sm" style="max-width: 189px; margin-right: 22px;">
                </div>
            </div>

            <div class="table-responsive"><div class="custom-scroll-container">
                <table class="table table-bordered w-100" id="sourcesTable">
                    <thead>
                        <tr>
                            <th class="no-sort"><input type="checkbox" id="selectAll"></th> <!-- This is your Select All checkbox -->
                            <th>Source Name</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($sources as $source)
                            <tr data-id="{{ $source->id }}">
                                <td><input type="checkbox" class="row-checkbox" value="{{ $source->id }}"></td>
                             <td>
                                <strong>{{ $source->name }}</strong><br>
                                <small class="text-muted">Total Leads: {{ $source->leads_count }}</small>
                            </td>
                                <td>
                                    <button class="btn btn-outline-primary btn-sm me-1 btn-edit" title="Edit" data-id="{{ $source->id }}" data-name="{{ $source->name }}">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form action="{{ route('sources.destroy', $source->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure want to delete this source?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                 </table>
                </div>
            </div>
        </div>
        
        <!-- New Source Modal -->
        <div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
             <form id="sourceForm">
            @csrf
            <div class="modal-header">
              <h5 class="modal-title" id="formModalLabel">New Source</h5>
              <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
            </div>

            <div class="modal-body">
              <div class="mb-3">
                <label for="sourceName" class="form-label"><span class="text-danger">*</span> Source Name</label>
                <input type="text" class="form-control" id="sourceName" name="name" required>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-dark">Save</button>
            </div>
            </form>
            </div>
          </div>
        </div>

        <!-- Edit Source Modal -->
        <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <form id="editSourceForm">
                @csrf
                @method('PUT')
                <div class="modal-header">
                  <h5 class="modal-title" id="editModalLabel">Edit Source</h5>
                 <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>

                <div class="modal-body">
                  <input type="hidden" id="editSourceId" name="id">
                  <div class="mb-3">
                    <label for="editSourceName" class="form-label"><span class="text-danger">*</span> Source Name</label>
                    <input type="text" class="form-control" id="editSourceName" name="name" required>
                  </div>
                </div>

                <div class="modal-footer">
                  <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Update</button>
                </div>
              </form>
            </div>
          </div>
        </div>
    </div>
    
    
    <div id="successMessage" class="alert alert-success" style="display:none;"></div>

@endsection

@section('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css">

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- JSZip for Excel export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<!-- pdfmake for PDF export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>


<!-- DataTables Buttons Extension -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>

<!-- pdfmake (REQUIRED for PDF Export) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

<!-- Buttons HTML5 export -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
$(document).ready(function () {
    const table = $('#sourcesTable').DataTable({
        scrollX: true,
        order: [],
        dom: 'Brtip',
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Sources',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
            {
                extend: 'csvHtml5',
                title: 'Sources',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
            {
                extend: 'pdfHtml5',
                title: 'Sources',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
            {
                extend: 'print',
                title: 'Sources',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
        ],
        pagingType: 'simple_numbers',
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search Sources...",
            lengthMenu: "_MENU_",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            },
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
        },
        columnDefs: [
            {
                targets: 0,
                orderable: false,
                searchable: false,
                className: 'no-sort'
            }
        ]
    });

    // Show entries custom dropdown
    $('#entries').on('change', function () {
        const length = parseInt($(this).val(), 10);
        table.page.len(length).draw();
    });

    // Custom search box
    $('#search').on('keyup', function () {
        table.search(this.value).draw();
    });
    
    
    function exportWithSelection(url, filename) {
    // Get selected row IDs from DataTable if using checkboxes (adjust as needed)
    var ids = [];
    $('input[type="checkbox"].row-checkbox:checked').each(function () {
        ids.push($(this).val());
    });

    // Create a form dynamically to submit via POST
    var form = $('<form>', {
        method: 'POST',
        action: url,
        target: '_blank' // opens in new tab
    });

    // Add CSRF token
    form.append($('<input>', {
        type: 'hidden',
        name: '_token',
        value: '{{ csrf_token() }}'
    }));

    // Add selected IDs
    ids.forEach(function (id) {
        form.append($('<input>', {
            type: 'hidden',
            name: 'ids[]',
            value: id
        }));
    });

    // Append and submit the form
    $('body').append(form);
    form.submit();
    form.remove();
}
    
   $('#exportPDF').on('click', function () {
    exportWithSelection('{{ route("sources.export.pdf") }}', 'sources.pdf');
});
    
     // Handle "Select All" checkbox
    $('#selectAll').on('change', function () {
        const isChecked = $(this).prop('checked');
        $('#sourcesTable .row-checkbox').prop('checked', isChecked);
        if (isChecked) {
            table.rows().select();
        } else {
            table.rows().deselect();
        }
    });

    // Handle individual row checkbox change
    $('#sourcesTable tbody').on('change', '.row-checkbox', function () {
        const $row = $(this).closest('tr');
        const rowIndex = table.row($row).index();
        if (this.checked) {
            table.row(rowIndex).select();
        } else {
            table.row(rowIndex).deselect();
        }

        // Update "Select All" checkbox state
        const allChecked = $('#sourcesTable .row-checkbox').length === $('#sourcesTable .row-checkbox:checked').length;
        $('#selectAll').prop('checked', allChecked);
    });

    // Export buttons
    $('#exportExcel').on('click', function () {
        table.button('.buttons-excel').trigger();
    });

    $('#exportCSV').on('click', function () {
        table.button('.buttons-csv').trigger();
    });

    $('#exportPDF').on('click', function () {
        table.button('.buttons-pdf').trigger();
    });

    $('#exportPrint').on('click', function () {
        table.button('.buttons-print').trigger();
    });

    // New Source AJAX form submission
    $('#sourceForm').submit(function (e) {
        e.preventDefault();

        let name = $('#sourceName').val();
        let _token = $('input[name="_token"]').val();

        $.ajax({
            url: "{{ route('sources.store') }}",
            method: "POST",
            data: { name: name, _token: _token },
            success: function (response) {
                $('#formModal').modal('hide');
                $('#sourceName').val('');

                let newRow = table.row.add([
                    `<input type="checkbox" name="selected[]" value="${response.id}">`,
                    response.name,
                    `
                    <button class="btn btn-outline-primary btn-sm me-1 btn-edit" title="Edit" data-id="${response.id}" data-name="${response.name}">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <form action="/sources/${response.id}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure?');">
                        <input type="hidden" name="_token" value="${_token}">
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                    `
                ]).draw().node();

                $(newRow).attr('data-id', response.id);
                $(newRow).find('td:eq(1)').addClass('source-name');
                $(newRow).addClass('table-success');
            },
            error: function (xhr) {
                alert("Error: " + xhr.responseJSON.message);
            }
        });
    });

    // Open Edit modal and fill data
    $('#sourcesTable').on('click', '.btn-edit', function () {
        let id = $(this).data('id');
        let name = $(this).data('name');

        $('#editSourceId').val(id);
        $('#editSourceName').val(name);
        $('#editModal').modal('show');
    });

    // Submit Edit form via AJAX
    $('#editSourceForm').submit(function (e) {
        e.preventDefault();

        let id = $('#editSourceId').val();
        let name = $('#editSourceName').val();
        let _token = $('input[name="_token"]').val();

        $.ajax({
            url: `/sources/${id}`,
            method: 'PUT',
            data: { name: name, _token: _token },
            success: function (response) {
    // Update the table row with new name
    let row = $(`#sourcesTable tbody tr[data-id="${id}"]`);
    row.find('.source-name').text(response.source.name);
    row.find('.btn-edit').data('name', response.source.name);

    $('#editModal').modal('hide');

    // Show success message
    $('#successMessage').text(response.message).fadeIn();

    setTimeout(() => {
        $('#successMessage').fadeOut();
    }, 3000);
},

            error: function (xhr) {
                alert("Error: " + xhr.responseJSON.message);
            }
        });
    });
});
</script>
@endsection