@extends('admin.layout.app')
@section('content')
    <div>
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
            <div>
                <h3 class="text-xl font-bold text-gray-800">Banners</h3>
                <p class="text-sm text-gray-500 mt-1">Manage all your banners from here</p>
            </div>
            <div class="mt-4 sm:mt-0">
                <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center gap-2" onclick='openBannerForm()'>
                    <i class="mdi mdi-plus text-lg leading-none"></i> Add New
                </button>
            </div>
        </div>

        <!-- DataTable Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table id="listDataTable" class="w-full whitespace-nowrap text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
                                <th class="px-6 py-4 font-medium rounded-tl-lg">Image</th>
                                <th class="px-6 py-4 font-medium">Title</th>
                                <th class="px-6 py-4 font-medium">Heading</th>
                                <th class="px-6 py-4 font-medium">Position</th>
                                <th class="px-6 py-4 font-medium">Link</th>
                                <th class="px-6 py-4 font-medium">Description</th>
                                <th class="px-6 py-4 font-medium rounded-tr-lg">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Banner Modal -->
    <div class="modal fade" id="bannerModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered relative">
            <form id="add_banner" class="modal-content border-0 shadow-2xl rounded-xl overflow-hidden bg-white w-full">
                <input type="hidden" name="id">
                
                <!-- Modal Header -->
                <div class="bg-gray-50 border-b border-gray-100 px-6 py-4 flex items-center justify-between">
                    <h5 class="text-lg font-bold text-gray-800 modal-title">Add Plan</h5>
                    <button type="button" class="text-gray-400 hover:text-red-500 transition-colors focus:outline-none p-1 rounded-md hover:bg-red-50 flex items-center justify-center h-8 w-8" data-bs-dismiss="modal">
                        <i class="mdi mdi-close text-xl leading-none"></i>
                    </button>
                </div>

                <!-- Modal Body -->
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Position -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Position</label>
                            <input type="number" name="position" min="1" placeholder="Position" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Title -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Title</label>
                            <input type="text" name="title" placeholder="Title" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Heading -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Heading</label>
                            <input type="text" name="heading" placeholder="Heading" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Image -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Banner Image</label>
                            <input type="file" name="image" onchange="document.querySelector('#image_preview').src=window.URL.createObjectURL(this.files[0])" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-all cursor-pointer border border-gray-200 rounded-lg" />
                            <div class="mt-3 min-h-[50px] flex items-center">
                                <img id="image_preview" src="" alt="Preview" class="rounded-lg shadow-sm max-w-[100px] h-auto object-cover border border-gray-100 hidden" onload="this.classList.remove('hidden')" onerror="this.classList.add('hidden')" />
                            </div>
                        </div>
                        
                        <!-- Link -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Link</label>
                            <input type="text" name="link" placeholder="Link (https://...)" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Description -->
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                            <textarea name="description" rows="4" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" placeholder="Enter description here..."></textarea>
                        </div>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="bg-gray-50 border-t border-gray-100 px-6 py-4 flex items-center justify-end gap-3 rounded-b-xl">
                    <button type="button" class="px-4 py-2 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium focus:outline-none" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="addUpdate px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('customJs')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.css" />
    <script src="https://cdn.datatables.net/2.1.3/js/dataTables.js"></script>
    <style>
        /* Modernized DataTable Styles for Tailwind */
        .dt-container { font-size: 0.875rem; color: #4b5563; }
        .dt-container th.dt-ordering-asc, .dt-container th.dt-ordering-desc { color: #111827; }
        table.dataTable { border-collapse: collapse !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable thead th, table.dataTable thead td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable tbody td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #f3f4f6 !important; }
        table.dataTable.no-footer { border-bottom: 1px solid #e5e7eb !important; }
        .dt-container .dt-length select, .dt-container .dt-search input { border: 1px solid #d1d5db !important; border-radius: 0.5rem !important; padding: 0.375rem 0.75rem !important; outline: none; transition: all 0.2s; font-size: 0.875rem; margin-left: 0.5rem; }
        .dt-container .dt-length select:focus, .dt-container .dt-search input:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; }
        .dt-container .dt-paging .dt-paging-button { border-radius: 0.375rem !important; padding: 0.375rem 0.75rem !important; margin: 0 0.125rem !important; border: 1px solid transparent !important; }
        .dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover { background-color: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; font-weight: 600; }
        .dt-container .dt-paging .dt-paging-button:hover:not(.current) { background-color: #f3f4f6 !important; border-color: #e5e7eb !important; color: #374151 !important; }
        .dt-container .dt-info { color: #6b7280 !important; font-size: 0.875rem; padding-top: 1rem !important; }
        .dt-layout-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
        .dt-layout-row:last-child { margin-top: 1.5rem; margin-bottom: 0; }
    </style>
    <script type="text/javascript">
        function reload_data_table(ele) {
            $(ele).DataTable().ajax.reload(null, false);
        }
        $(document).on('submit', '#add_banner', function(event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('admin_banner_add') }}",
                method: 'POST',
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                processData: false,
                success: function(data) {
                    webinaToast({
                        type: data.type,
                        message: data.text
                    });
                    if (data.type == 'success') {
                        reload_data_table('#listDataTable');
                        $('#bannerModal').modal('hide');
                    }
                }
            });
        });

        function openBannerForm(edit_id = 0) {
            if (edit_id) {
                $('.addUpdate').text('Update');
            } else {
                $('.addUpdate').text('Save');
            }
            $("#bannerModal").find(
                    "input[name='id'],input[type='text'], input[type='number'], input[type='password'], select, textarea")
                .val('');
            $("#bannerModal").modal('show');
            if (parseInt(edit_id) > 0) {
                $.ajax({
                    url: "{{ route('admin_banner_edit') }}",
                    method: "POST",
                    data: {
                        id: edit_id
                    },
                    dataType: "JSON",
                    success: function(data) {
                        $.each(data, function(key, value) {
                            if (key == "image") {
                                $("#image_preview").attr("src",
                                    "{{ asset('manual_storage/') }}/" + value);
                            } else {
                                $('#add_banner [name="' + key + '"]').val(value);
                            }
                        });
                    }
                });
            }
        }

        function load_datatable() {
            $('#listDataTable').DataTable({
                "pageLength": 10,
                "lengthMenu": [10, 20, 50, 100, 200],
                "language": {
                    "lengthMenu": '_MENU_',
                    "sSearch": "",
                    "searchPlaceholder": "Search records",
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: "{{ route('admin_banner_fetchAllList') }}",
                    type: "POST",
                    data: {}
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [4, 5, 6]
                }, ],
                "order": [
                    [0, 'desc']
                ],
            });
        }

        function updateStatus(id) {
            event.preventDefault();
            webinaFire({
                icon: "question",
                title: "Are you sure to change status?",
                acceptButton: "Yes, change it!",
                cancelButton: "Cancel",
                message: "",
                accept: function() {
                    if ($("#" + id + "_status").is(":checked")) {
                        var status = 0;
                    } else {
                        var status = 1;
                    }
                    $.ajax({
                        url: "{{ route('admin_banner_status') }}",
                        method: 'POST',
                        data: {
                            id: id,
                            status: status
                        },
                        dataType: 'JSON',
                        success: function(data) {
                            webinaToast({
                                type: data.type,
                                message: data.text
                            });
                            if (data.type == 'success') {
                                reload_data_table('#listDataTable');
                            }
                        }
                    });
                }
            });
        }

        function deleteBanner(id) {
            event.preventDefault();
            webinaFire({
                icon: "question",
                title: "Are you sure to Delete?",
                acceptButton: "Yes, Delete it!",
                cancelButton: "Cancel",
                message: "",
                accept: function() {
                    $.ajax({
                        url: "{{ route('admin_banner_delete') }}",
                        type: 'delete',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function(data) {
                            webinaToast({
                                type: data.type,
                                message: data.text
                            });
                            if (data.type == 'success') {
                                reload_data_table("#listDataTable");
                            }
                        }
                    });
                }
            });
        }

        function copyLink(id) {
            var text = document.getElementById(id).value;
            navigator.clipboard.writeText(text)
                .then(function() {
                    webinaToast({
                        type: "success",
                        message: "Link Copied!"
                    });
                })
                .catch(function(err) {
                    console.error("Copy failed", err);
                });
        }
        $(document).ready(function() {
            load_datatable();
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('modal') === '0') {
                openBannerForm();
            }
        });
    </script>
@endsection