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

@section('content')
    <section>

        <div class="d-flex align-items-center justify-content-between mb-4">
            <h2 class="text-title fw-semibold mb-0">Banners</h2>
            <a href="{{ route('backend.template.manage-content.CreateBanner') }}"
                class="button-green d-flex align-items-center gap-2 px-3">
                <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="plus">
                <span>Create Banner</span>
            </a>
        </div>

        <div class="fb-container">

            {{-- Filter Row --}}
            <form method="GET" action="{{ route('backend.template.manage-content.index') }}"
                class="fb-filter-row justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="table-search-box" style="min-width:200px;">
                        <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                            alt="search">
                        <input type="text" name="search" value="{{ request('search') }}"
                            placeholder="Search by banner name" class="table-search-input">
                    </div>
                    <select name="status" class="table-filter-select" style="width:130px;" onchange="this.form.submit()">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                    </select>
                    <select name="platform" class="table-filter-select" style="width:130px;" onchange="this.form.submit()">
                        <option value="">All Platform</option>
                        <option value="web" {{ request('platform') === 'web' ? 'selected' : '' }}>Web</option>
                        <option value="mobile" {{ request('platform') === 'mobile' ? 'selected' : '' }}>Mobile</option>
                    </select>
                </div>
                <div class="d-flex align-items-center gap-2" style="font-size:13px;color:#6b7280;">
                    Show
                    <select name="per_page" class="table-filter-select"
                        style="width:72px;padding-left:10px;padding-right:10px;" onchange="this.form.submit()">
                        @foreach ([10, 25, 50] as $pp)
                            <option value="{{ $pp }}" {{ request('per_page', 10) == $pp ? 'selected' : '' }}>
                                {{ $pp }}</option>
                        @endforeach
                    </select>
                    entries
                </div>
            </form>

            @if ($banners->isEmpty())
                <div class="text-center text-muted py-5">No banners found.</div>
            @else
                {{-- Banner List --}}
                <div class="fb-list" id="bannerAccordion">
                    @foreach ($banners as $banner)
                        @php
                            $colId = 'banner-' . $banner->id;
                            $groupedSections = $banner->sections->groupBy('category_id');
                            $catCount = $groupedSections->count();
                        @endphp
                        <div class="fb-item" id="fb-item-{{ $banner->id }}">

                            {{-- Header --}}
                            <div class="fb-header d-flex align-items-center justify-content-between collapsed"
                                data-bs-toggle="collapse" data-bs-target="#{{ $colId }}"
                                style="cursor:pointer; padding:14px 20px; user-select:none;">

                                <div class="d-flex align-items-center gap-3">
                                    @if ($banner->banner_image)
                                        <img src="{{ asset($banner->banner_image) }}" alt="banner"
                                            style="width:40px;height:40px;object-fit:cover;border-radius:8px;
                                    flex-shrink:0;border:1px solid #e5e7eb;">
                                    @else
                                        <div class="banner-icon-box">
                                            <i class="ri-image-2-line" style="font-size:18px;color:#9ca3af;"></i>
                                        </div>
                                    @endif
                                    <span class="fw-semibold"
                                        style="font-size:14px;color:#111827;">{{ $banner->name }}</span>
                                </div>

                                <div class="d-flex align-items-center gap-3" onclick="event.stopPropagation()">
                                    <span class="status-badge-{{ $banner->status }}">{{ ucfirst($banner->status) }}</span>

                                    {{-- Collapsed: section count + platform --}}
                                    <span class="banner-meta-collapsed" style="font-size:12px;color:#6b7280;">
                                        &bull; Under {{ $banner->sections_count }}
                                        section{{ $banner->sections_count != 1 ? 's' : '' }}
                                        &bull; <span
                                            style="color:#374151;font-weight:600;">{{ ucfirst($banner->platform) }}</span>
                                    </span>

                                    {{-- Expanded: platform only --}}
                                    <span class="banner-meta-expanded" style="font-size:12px;color:#6b7280;display:none;">
                                        &bull; <span
                                            style="color:#374151;font-weight:600;">{{ ucfirst($banner->platform) }}</span>
                                    </span>

                                    {{-- Action icons (shown when expanded) --}}
                                    <div class="banner-actions" style="display:none;"
                                        class="d-flex align-items-center gap-1">
                                        <a href="{{ route('backend.template.manage-content.show', $banner->id) }}"
                                            class="dt-act-btn" title="View">
                                            <img src="{{ asset('backend/template/svg-icon/view.svg') }}" alt="View">
                                        </a>
                                        <a href="{{ route('backend.template.manage-content.EditBanner', $banner->id) }}"
                                            class="dt-act-btn" title="Edit">
                                            <img src="{{ asset('backend/template/svg-icon/edit.svg') }}" alt="Edit">
                                        </a>
                                        <button class="dt-act-btn" title="Delete"
                                            onclick="openDeleteModal({{ $banner->id }}, '{{ addslashes($banner->name) }}')">
                                            <img src="{{ asset('backend/template/svg-icon/delete.svg') }}" alt="Delete">
                                        </button>
                                    </div>

                                    <i class="ri-arrow-down-s-line fb-chevron"
                                        style="font-size:18px;color:#6b7280;transition:transform .2s;flex-shrink:0;"></i>
                                </div>
                            </div>

                            {{-- Body --}}
                            <div id="{{ $colId }}" class="collapse">
                                <div style="background:#f0fdf4;border-top:1px solid #dcfce7;padding:16px;">

                                    @if ($groupedSections->isEmpty())
                                        <p class="text-muted text-center py-3 mb-0" style="font-size:13px;">No categories
                                            added yet.</p>
                                    @else
                                        <div class="table-responsive"
                                            style="border-radius:10px;overflow:hidden;border:1px solid #e5e7eb;">
                                            <table class="table align-middle mb-0" style="background:#fff;">
                                                <thead>
                                                    <tr style="background:#f9fafb;">
                                                        <th class="table-head-content ps-3">Category Name</th>
                                                        <th class="table-head-content">Section Position</th>
                                                        <th class="table-head-content">Last Updated On</th>
                                                        <th class="table-head-content">Status</th>
                                                        <th class="table-head-content">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($groupedSections as $catId => $sections)
                                                        @php
                                                            $firstSec = $sections->first();
                                                            $catName = $firstSec->category?->name ?? 'Unknown';
                                                            $fromDate = $firstSec->pivot->from_date;
                                                            $toDate = $firstSec->pivot->to_date;
                                                            $pivotStatus = $firstSec->pivot->status ?? 'active';
                                                            $secCount = $sections->count();
                                                            $rowIdx = $loop->index;
                                                        @endphp
                                                        <tr {{ $rowIdx >= 3 ? 'data-extra-for="' . $banner->id . '"' : '' }}
                                                            style="{{ $rowIdx >= 3 ? 'display:none;' : '' }}">
                                                            <td class="table-body-content ps-3" style="font-weight:500;">
                                                                {{ $catName }}</td>
                                                            <td class="table-body-content">{{ $secCount }}</td>
                                                            <td class="table-body-content">
                                                                @if ($fromDate || $toDate)
                                                                    <span
                                                                        style="display:inline-flex;align-items:center;gap:6px;">
                                                                        <i class="ri-checkbox-blank-circle-fill"
                                                                            style="font-size:8px;color:#3b82f6;flex-shrink:0;"></i>
                                                                        @if ($fromDate && $toDate)
                                                                            From
                                                                            {{ \Carbon\Carbon::parse($fromDate)->format('d/m/Y') }}
                                                                            - To
                                                                            {{ \Carbon\Carbon::parse($toDate)->format('d/m/Y') }}
                                                                        @elseif($fromDate)
                                                                            From
                                                                            {{ \Carbon\Carbon::parse($fromDate)->format('d/m/Y') }}
                                                                        @else
                                                                            To
                                                                            {{ \Carbon\Carbon::parse($toDate)->format('d/m/Y') }}
                                                                        @endif
                                                                    </span>
                                                                @else
                                                                    <span style="color:#9ca3af;">—</span>
                                                                @endif
                                                            </td>
                                                            <td class="table-body-content">
                                                                <span
                                                                    class="status-badge-{{ $pivotStatus }}">{{ ucfirst($pivotStatus) }}</span>
                                                            </td>
                                                            <td class="table-body-content">
                                                                <button class="btn-remove-cat"
                                                                    onclick="openRemoveModal({{ $banner->id }}, {{ $catId }}, '{{ addslashes($banner->name) }}', '{{ addslashes($catName) }}')">
                                                                    Remove
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>

                                        @if ($catCount > 3)
                                            <div class="text-center mt-3">
                                                <button type="button" class="view-all-btn"
                                                    onclick="toggleViewAll({{ $banner->id }}, {{ $catCount - 3 }}, this)">
                                                    {{ $catCount - 3 }} more sections
                                                    <span style="color:#0AA437;font-weight:600;">View All</span>
                                                    <i class="ri-arrow-down-s-line"></i>
                                                </button>
                                            </div>
                                        @endif
                                    @endif

                                </div>
                            </div>

                        </div>
                    @endforeach
                </div>


            @endif

        </div>{{-- /.fb-container --}}

    </section>

    {{-- Remove Category Modal --}}
    <div class="modal fade" id="removeCatModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header" style="background:#fef2f2;height:60px;">
                    <h5 class="mt-2" style="color:#991b1b;">Remove Banner from Section</h5>
                </div>
                <div class="modal-body">
                    <p class="fw-semibold mb-2" style="font-size:14px;color:#111827;">
                        Are you sure you want to remove
                        <strong id="removeBannerNameText"></strong>
                        from the
                        <strong id="removeCatNameText"></strong>?
                    </p>
                    <p class="mb-0" style="font-size:13px;color:#6b7280;">
                        The banner will no longer be visible to users in this section.
                    </p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="removeCatConfirm" class="btn-delete-action">Delete Role</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Status Modal --}}
    <div class="modal fade" id="statusBannerModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header" id="statusBannerHeader" style="height:60px;">
                    <h5 class="mt-2" id="statusBannerTitle"></h5>
                </div>
                <div class="modal-body">
                    <p id="statusBannerBody" class="mb-1"></p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="statusBannerConfirm" class="btn-inactive-action">Confirm</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteBannerModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header delete-header" style="height:60px;">
                    <h5 class="mt-2">Delete Banner?</h5>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <strong id="deleteBannerName"></strong>? This action cannot be
                        undone.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="deleteBannerConfirm" class="btn-delete-action">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const CSRF = "{{ csrf_token() }}";
        const BASE = "{{ url('/admin/manage-content') }}";

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        /* ── Accordion: show/hide actions + meta on expand/collapse ── */
        document.querySelectorAll('.fb-header[data-bs-toggle="collapse"]').forEach(function(header) {
            var targetId = header.getAttribute('data-bs-target');
            var target = document.querySelector(targetId);
            if (!target) return;

            target.addEventListener('show.bs.collapse', function() {
                header.querySelector('.fb-chevron').style.transform = 'rotate(180deg)';
                header.querySelector('.banner-meta-collapsed').style.display = 'none';
                header.querySelector('.banner-meta-expanded').style.display = '';
                header.querySelector('.banner-actions').style.display = 'flex';
            });
            target.addEventListener('hide.bs.collapse', function() {
                header.querySelector('.fb-chevron').style.transform = 'rotate(0deg)';
                header.querySelector('.banner-meta-collapsed').style.display = '';
                header.querySelector('.banner-meta-expanded').style.display = 'none';
                header.querySelector('.banner-actions').style.display = 'none';
            });
        });

        /* ── View All toggle ─────────────────────────────────────────── */
        function toggleViewAll(bannerId, extra, btn) {
            var extras = document.querySelectorAll('[data-extra-for="' + bannerId + '"]');
            var isHidden = extras.length > 0 && extras[0].style.display === 'none';
            extras.forEach(function(row) {
                row.style.display = isHidden ? '' : 'none';
            });
            btn.innerHTML = isHidden ?
                'Show Less <i class="ri-arrow-up-s-line"></i>' :
                extra +
                ' more sections <span style="color:#0AA437;font-weight:600;">View All</span> <i class="ri-arrow-down-s-line"></i>';
        }

        /* ── Remove Category ─────────────────────────────────────────── */
        var removeBannerId = null,
            removeCatId = null;

        function openRemoveModal(bannerId, catId, bannerName, catName) {
            removeBannerId = bannerId;
            removeCatId = catId;
            document.getElementById('removeBannerNameText').textContent = bannerName;
            document.getElementById('removeCatNameText').textContent = catName;
            new bootstrap.Modal(document.getElementById('removeCatModal')).show();
        }

        $('#removeCatConfirm').on('click', function() {
            var $btn = $(this).prop('disabled', true).text('Removing…');
            $.ajax({
                url: BASE + '/' + removeBannerId + '/remove-category',
                type: 'POST',
                data: {
                    _token: CSRF,
                    category_id: removeCatId
                },
                success: function() {
                    toastr.success('Category removed from banner.');
                    bootstrap.Modal.getInstance(document.getElementById('removeCatModal')).hide();
                    setTimeout(() => location.reload(), 700);
                },
                error: function() {
                    toastr.error('Failed to remove category.');
                    $btn.prop('disabled', false).text('Delete Role');
                }
            });
        });

        /* ── Status Modal ────────────────────────────────────────────── */
        var statusBannerId = null,
            statusBannerNext = null;

        function openStatusModal(id, current, name) {
            statusBannerId = id;
            statusBannerNext = current === 'active' ? 'inactive' : 'active';
            var isInact = statusBannerNext === 'inactive';
            $('#statusBannerTitle').text(isInact ? 'Inactivate Banner' : 'Activate Banner');
            $('#statusBannerHeader').attr('class', 'modal-header ' + (isInact ? 'inactive-header' : 'activate-header'));
            $('#statusBannerBody').html((isInact ? 'Inactivate ' : 'Activate ') + '<strong>' + name + '</strong>?');
            $('#statusBannerConfirm').attr('class', isInact ? 'btn-inactive-action' : 'btn-activate-action')
                .text(isInact ? 'Inactivate' : 'Activate').prop('disabled', false);
            new bootstrap.Modal(document.getElementById('statusBannerModal')).show();
        }
        $('#statusBannerConfirm').on('click', function() {
            $(this).prop('disabled', true);
            $.ajax({
                url: BASE + '/' + statusBannerId + '/status',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'PATCH',
                    status: statusBannerNext
                },
                success: function() {
                    toastr.success('Status updated.');
                    setTimeout(() => location.reload(), 700);
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#statusBannerConfirm').prop('disabled', false);
                }
            });
        });

        /* ── Delete Modal ────────────────────────────────────────────── */
        var deleteBannerId = null;

        function openDeleteModal(id, name) {
            deleteBannerId = id;
            $('#deleteBannerName').text(name);
            new bootstrap.Modal(document.getElementById('deleteBannerModal')).show();
        }
        $('#deleteBannerConfirm').on('click', function() {
            $(this).prop('disabled', true).text('Deleting…');
            $.ajax({
                url: BASE + '/' + deleteBannerId + '/destroy',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'DELETE'
                },
                success: function() {
                    toastr.success('Banner deleted.');
                    bootstrap.Modal.getInstance(document.getElementById('deleteBannerModal')).hide();
                    setTimeout(() => location.reload(), 700);
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#deleteBannerConfirm').prop('disabled', false).text('Delete');
                }
            });
        });
    </script>
@endsection