@extends('template.layouts.template-base')
@section('title', 'Banner')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }

        .banner-page .dropdown-btn {
            min-width: 95px !important;
            color: #2a2a2a !important;
        }

        .sortable-ghost {
            opacity: 0.4;
            background: #e8eeff;
        }

        .bx-grid-vertical {
            cursor: grab;
        }

        .bx-grid-vertical:active {
            cursor: grabbing;
        }
    </style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="javascript:void(0);"><span class="breadcrumb-link">Banners</span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class="action-buttons d-none" id="bulkActions">
                        <button type="button" class="btn-delete-category" data-bs-toggle="modal"
                            data-bs-target=".remove-banner-list-screen">
                            Delete List <i class="ri-delete-bin-line fs-5"></i>
                        </button>
                    </div>
                    @can('read', App\Models\Banner::class)
                        <a href="{{ route('backend.banner.export') }}" class="btn-export-category">
                            Export
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 16V3"></path>
                                <polyline points="7 8 12 3 17 8"></polyline>
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            </svg>
                        </a>
                    @endcan
                    @can('create', App\Models\Banner::class)
                        <a class="btn-add-category" href="{{ route('backend.banner.create') }}">
                            Add Banner<i class="ri-add-fill fs-5"></i>
                        </a>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec customer-page">
        <div class="content-wrapper blog-category">
            <div class="filter-section">
                <span class="badge-total-cus">Total Banners - {{ $total }}</span>
                <span class="badge-active-cus">Active Banners - {{ $active }}</span>
                <span class="badge-inacive-cus">Inactive Banners - {{ $inactive }}</span>
                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div>
                <div class="position-relative banner-page">
                    <div class="col-md-3 custom-dropdown">
                        <select id="statusFilter" class="dropdown-btn">
                            <option value="">Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive table-card">
                    {{-- Bulk delete form wraps the table --}}
                    <form id="bulkDeleteForm" method="POST" action="{{ route('backend.banner.bulk-destroy') }}">
                        @csrf
                        @method('DELETE')
                        <table class="table align-middle mb-0 orders-table-container">
                            <thead class="custom-table-header">
                                <tr>
                                    <th scope="col" class="d-flex align-items-center gap-2">
                                        <input type="checkbox" id="selectAll"> Banner Image & Title
                                    </th>
                                    <th scope="col">Order No</th>
                                    <th scope="col">Type</th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody id="categoryList">
                              @forelse($banners as $banner)
                                    <tr data-id="{{ $banner->id }}">
                                        <td class="d-flex align-items-center gap-2">
                                            <i class="bx bx-grid-vertical fs-5"></i>

                                            <input type="checkbox" name="ids[]" value="{{ $banner->id }}"
                                                class="category-checkbox" />

                                            @php
                                                $image = $banner->image 
                                                    ? asset($banner->image) 
                                                    : asset('assets/template/images/wheat-img.png');
                                            @endphp

                                            <a href="javascript:void(0)" 
                                            class="show_file_modal"
                                            data-url="{{ $image }}"
                                            data-title="{{ $banner->banner_heading_en }}"
                                            data-size="modal-lg">

                                                <img src="{{ $image }}" 
                                                    alt="{{ $banner->banner_heading_en }}" 
                                                    class="serv-img" 
                                                    style="cursor:pointer;" />
                                            </a>

                                            {{ $banner->banner_heading_en ?? 'Banner Heading...' }}
                                        </td>
                                        <td>{{ $banner->banner_order ?? '-' }}</td>
                                        <td>
                                            @if ($banner->banner_type == 1)
                                                Annapurna Banner
                                            @elseif($banner->banner_type == 2)
                                                Promotion Banner
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>
                                            {{ $banner->start_date ? \Carbon\Carbon::parse($banner->start_date)->format('M d') : '-' }}
                                            -
                                            {{ $banner->end_date ? \Carbon\Carbon::parse($banner->end_date)->format('M d') : '-' }}
                                        </td>
                                        <td>
                                            <span
                                                class="status-badge {{ $banner->status == 1 ? 'badge-active-cus' : 'badge-inacive-cus' }}">
                                                {{ $banner->status == 1 ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="action-btn-sec">
                                                <a href="javascript:void(0);" data-bs-toggle="offcanvas"
                                                    data-bs-target="#addBannerOffcanvas" class="action-icon view-banner"
                                                    data-id="{{ $banner->id }}"
                                                    data-heading="{{ $banner->banner_heading_en ?? '-' }}"
                                                    data-sub-heading="{{ $banner->banner_sub_heading_en ?? '-' }}"
                                                    data-heading-ta="{{ $banner->banner_heading_ta ?? '-' }}"
                                                    data-sub-heading-ta="{{ $banner->banner_sub_heading_ta ?? '-' }}"
                                                    data-phone="{{ $banner->phone_number ?? '-' }}"
                                                    data-start="{{ $banner->start_date ? \Carbon\Carbon::parse($banner->start_date)->format('d M, Y') : '-' }}"
                                                    data-end="{{ $banner->end_date ? \Carbon\Carbon::parse($banner->end_date)->format('d M, Y') : '-' }}"
                                                    data-order="{{ $banner->banner_order ?? '-' }}"
                                                    data-status="{{ $banner->status == 1 ? 'Active' : 'Inactive' }}"
                                                    data-type="{{ $banner->banner_type == 1 ? 'Annapurna Banner' : 'Promotion Banner' }}"
                                                    data-image="{{ $banner->image ? asset($banner->image) : asset('assets/template/images/wheat-img.png') }}"
                                                    data-edit="{{ route('backend.banner.edit', $banner->id) }}">
                                                    <i class="ri-eye-fill fs-5"></i>
                                                </a>
                                                @can('edit', $banner)
                                                    <a href="{{ route('backend.banner.edit', $banner->id) }}"
                                                        class="action-icon">
                                                        <i class="ri-edit-fill fs-5"></i>
                                                    </a>
                                                @endcan
                                                @can('delete', $banner)
                                                    <a href="javascript:void(0);" data-bs-toggle="modal"
                                                        data-bs-target=".remove-banner-screen"
                                                        class="action-icon delete-banner-btn" data-id="{{ $banner->id }}">
                                                        <i class="bx bxs-trash fs-5"></i>
                                                    </a>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">No banners found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Pull all session values ONCE --}}
    @php
        $bannerSuccess = session()->pull('success');
        $bannerUpdated = session()->pull('banner_updated');
        $bannerDeleted = session()->pull('banner_deleted');
        $bannerBulkDeleted = session()->pull('banner_bulk_deleted');
        $bannerStatus = session()->pull('banner_status');
    @endphp

    {{-- Toast: Add Active --}}
    @if ($bannerSuccess && $bannerStatus == 1)
        <div class="position-fixed top-0 end-0 p-4" style="z-index: 1090">
            <div id="bannerSuccessToast" class="toast login-success-toast show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="toast-body d-flex align-items-center gap-3">
                    <div class="toast-left">
                        <div class="check-circle">✓</div>
                    </div>
                    <div class="toast-right">
                        <h6>Banner Added Successfully</h6>
                        <p>The banner has been added successfully and is now available in the banner list.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Toast: Add Inactive --}}
    @if ($bannerSuccess && $bannerStatus == 0)
        <div class="position-fixed top-0 end-0 p-4" style="z-index: 1090">
            <div id="bannerInactiveToast" class="toast login-success-toast show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="toast-body d-flex align-items-center gap-3">
                    <div class="toast-left">
                        <div class="check-circle">✓</div>
                    </div>
                    <div class="toast-right">
                        <h6>Banner Added Successfully</h6>
                        <p>The banner has been added successfully and is currently inactive. You can activate it anytime
                            from the banner list.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Toast: Update Active --}}
    @if ($bannerUpdated && $bannerStatus == 1)
        <div class="position-fixed top-0 end-0 p-4" style="z-index: 1090">
            <div id="bannerUpdatedActiveToast" class="toast login-success-toast show" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="toast-body d-flex align-items-center gap-3">
                    <div class="toast-left">
                        <div class="check-circle">✓</div>
                    </div>
                    <div class="toast-right">
                        <h6>Banner Updated Successfully</h6>
                        <p>The banner has been updated successfully and is now available in the banner list.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Toast: Update Inactive --}}
    @if ($bannerUpdated && $bannerStatus == 0)
        <div class="position-fixed top-0 end-0 p-4" style="z-index: 1090">
            <div id="bannerUpdatedInactiveToast" class="toast login-success-toast show" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="toast-body d-flex align-items-center gap-3">
                    <div class="toast-left">
                        <div class="check-circle">✓</div>
                    </div>
                    <div class="toast-right">
                        <h6>Banner Updated Successfully</h6>
                        <p>The banner has been updated successfully and is currently inactive. You can activate it anytime
                            from the banner list.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Toast: Delete Success --}}
    @if ($bannerDeleted)
        <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
            <div id="deleteBannerToast" class="toast login-success-toast show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="toast-body d-flex align-items-center gap-3">
                    <div class="toast-left">
                        <div class="check-circle">✓</div>
                    </div>
                    <div class="toast-right">
                        <h6>Delete Successful</h6>
                        <p>The banner has been deleted successfully.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Toast: Bulk Delete Success --}}
    @if ($bannerBulkDeleted)
        <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
            <div id="deleteBannerListToast" class="toast login-success-toast show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="toast-body d-flex align-items-center gap-3">
                    <div class="toast-left">
                        <div class="check-circle">✓</div>
                    </div>
                    <div class="toast-right">
                        <h6>Deleted Successful</h6>
                        <p>These banners have been deleted successfully.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- View Banner Offcanvas --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addBannerOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasBannerType">Banner</h5>
        </div>
        <div class="offcanvas-body">
            <div class="banner-details">
                <div class="banner-item">
                    <span>Banner Heading (English)</span>
                    <span><strong id="offcanvasHeading">-</strong></span>
                    <div class="banner-item">
                        <span>Banner Heading (Tamil)</span>
                        <span><strong id="offcanvasHeadingTamil">-</strong></span>
                    </div>
                </div>
                <div class="banner-item">
                    <span>Banner Sub Heading (English)</span>
                    <span><strong id="offcanvasSubHeading">-</strong></span>
                </div>
                <div class="banner-item">
                    <span>Banner Sub Heading (Tamil)</span>
                    <span><strong id="offcanvasSubHeadingTamil">-</strong></span>
                </div>
                <div class="banner-item">
                    <span>Phone Number</span>
                    <span><strong id="offcanvasPhone">-</strong></span>
                </div>
                <div class="d-flex align-items-center gap-4">
                    <div class="banner-item">
                        <span>Start Date</span>
                        <span><strong id="offcanvasStart">-</strong></span>
                    </div>
                    <div class="banner-item">
                        <span>End Date</span>
                        <span><strong id="offcanvasEnd">-</strong></span>
                    </div>
                </div>
                <div class="banner-item">
                    <span>Banner Order</span>
                    <span><strong id="offcanvasOrder">-</strong></span>
                </div>
                <div class="banner-item">
                    <span>Banner Status</span>
                    <span><strong id="offcanvasStatus">-</strong></span>
                </div>
            </div>
            <div class="mb-3">
                <span>Banner Image</span>
                <img id="offcanvasImage" src="{{ asset('assets/template/images/wheat-img.png') }}"
                    class="category-image-upload" style="width:100%; object-fit:contain;" />
            </div>
        </div>
    </div>

    {{-- Delete Single Banner Modal --}}
    <div class="modal fade remove-banner-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box"><i class="bx bxs-trash"></i></div>
                    <h5>Delete Banner?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <p>Are you sure you want to delete this banner? This banner will be permanently removed. This action
                        cannot be undone.</p>
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                        <form id="deleteBannerForm" method="POST" action="">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn delete-btn">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Banner List Modal --}}
    <div class="modal fade remove-banner-list-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box"><i class="bx bxs-trash"></i></div>
                    <h5>Delete Banner List?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <p>Are you sure you want to delete these banners? They will be permanently removed. This action cannot
                        be undone.</p>
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                        <button type="button" class="btn delete-btn" onclick="submitBulkDelete()">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
    <script>
        // Auto-dismiss session toasts
        document.addEventListener('DOMContentLoaded', function() {
            ['bannerSuccessToast', 'bannerInactiveToast', 'bannerUpdatedActiveToast', 'bannerUpdatedInactiveToast',
                'deleteBannerToast', 'deleteBannerListToast'
            ]
            .forEach(function(id) {
                const toast = document.getElementById(id);
                if (toast) setTimeout(() => toast.classList.remove('show'), 4000);
            });
        });

        // Drag and Drop row reorder
        const tbody = document.getElementById('categoryList');
        Sortable.create(tbody, {
            animation: 150,
            handle: '.bx-grid-vertical',
            ghostClass: 'sortable-ghost',
            onEnd: function() {
                const rows = tbody.querySelectorAll('tr');
                const order = [];
                rows.forEach(function(row, index) {
                    const id = row.dataset.id;
                    if (id) order.push({
                        id: id,
                        order: index + 1
                    });
                });

                fetch('{{ route('backend.banner.reorder') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        order: order
                    })
                });
            }
        });

        // Offcanvas: populate with real banner data
        document.querySelectorAll('.view-banner').forEach(function(btn) {
            btn.addEventListener('click', function() {
                document.getElementById('offcanvasBannerType').textContent = this.dataset.type || '-';
                document.getElementById('offcanvasHeading').textContent = this.dataset.heading || '-';
                document.getElementById('offcanvasSubHeading').textContent = this.dataset.subHeading || '-';
                document.getElementById('offcanvasHeadingTamil').textContent = this.dataset.headingTa ||
                    '-';
                document.getElementById('offcanvasSubHeadingTamil').textContent = this.dataset
                    .subHeadingTa || '-';
                document.getElementById('offcanvasPhone').textContent = this.dataset.phone || '-';
                document.getElementById('offcanvasStart').textContent = this.dataset.start || '-';
                document.getElementById('offcanvasEnd').textContent = this.dataset.end || '-';
                document.getElementById('offcanvasOrder').textContent = this.dataset.order || '-';
                document.getElementById('offcanvasStatus').textContent = this.dataset.status || '-';
                document.getElementById('offcanvasImage').src = this.dataset.image;
                document.getElementById('offcanvasEditBtn').href = this.dataset.edit;
            });
        });

        // Single delete: set form action dynamically using named route
        document.querySelectorAll('.delete-banner-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const id = this.dataset.id;
                document.getElementById('deleteBannerForm').action =
                    '{{ route('backend.banner.destroy', ':id') }}'.replace(':id', id);
            });
        });

        // Bulk delete submit
        function submitBulkDelete() {
            document.getElementById('bulkDeleteForm').submit();
        }

        // Select All checkboxes
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.category-checkbox');
        const bulkActions = document.getElementById('bulkActions');

        function toggleBulkActions() {
            const anyChecked = [...checkboxes].some(cb => cb.checked);
            bulkActions.classList.toggle('d-none', !anyChecked);
        }

        selectAll?.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            toggleBulkActions();
        });

        checkboxes.forEach(cb => {
            cb.addEventListener('change', () => {
                selectAll.checked = [...checkboxes].every(c => c.checked);
                toggleBulkActions();
            });
        });

        const searchInput = document.getElementById('searchInput');
        const statusFilter = document.getElementById('statusFilter');
        const rows = document.querySelectorAll('#categoryList tr[data-id]');

        function applyFilters() {
            const searchText = searchInput.value.toLowerCase().trim();
            const statusValue = statusFilter.value;
            let count = 0;

            rows.forEach(row => {
                const title = row.querySelector('td:first-child').textContent.toLowerCase();
                const status = row.querySelector('.view-banner').dataset.status;
                const statusVal = status === 'Active' ? '1' : '0';

                if (
                    (searchText === '' || title.includes(searchText)) &&
                    (statusValue === '' || statusVal === statusValue)
                ) {
                    row.style.display = '';
                    count++;
                } else {
                    row.style.display = 'none';
                }
            });

            let noRow = document.getElementById('noResultsRow');

            if (count === 0) {
                if (!noRow) {
                    noRow = document.createElement('tr');
                    noRow.id = 'noResultsRow';
                    noRow.innerHTML = '<td colspan="6" class="text-center py-4">No banners found.</td>';
                    document.getElementById('categoryList').appendChild(noRow);
                }
                noRow.style.display = '';
            } else if (noRow) {
                noRow.style.display = 'none';
            }
        }
        searchInput.addEventListener('input', applyFilters);
        statusFilter.addEventListener('change', applyFilters);
    </script>
@endsection