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

@section('content')
    <section>

        {{-- Header --}}
        <div class="banner d-flex  justify-content-between mb-4">
            <a href="{{ route('backend.template.manage-content.index') }}"
                class="d-inline-flex align-items-center gap-2 text-decoration-none">
                <i class="ri-arrow-left-s-line fs-4" style="color:#374151;"></i>
                <h2 class="text-title fw-semibold mb-0">Banner Details</h2>
            </a>
            <div class="mark-inactive buttons-group d-flex gap-2">
                <button id="statusBtn" class="btn-inactive" onclick="openStatusModal()">
                    {{ $banner->status === 'active' ? 'Mark as Inactive' : 'Mark as Active' }}
                </button>
                <div class="down-button">
                    <a href="{{ route('backend.template.manage-content.EditBanner', $banner->id) }}"
                        class="btn-edit d-inline-flex align-items-center gap-2">
                        <img src="{{ asset('backend/template/svg-icon/edit-outline-w.svg') }}"
                            style="width:16px;height:16px;" alt="edit">
                        Edit Banner
                    </a>
                    <button class="btn-delete d-inline-flex align-items-center gap-2" onclick="openDeleteModal()">
                        <img src="{{ asset('backend/template/svg-icon/delete-outline-w.svg') }}"
                            style="width:16px;height:16px;" alt="delete">
                        Delete Banner
                    </button>
                </div>
            </div>
        </div>

        {{-- Banner Info Card --}}
        <div class="fb-container mb-3">
            <div class="d-flex align-items-center gap-4 p-4">
                @if ($banner->banner_image)
                    <img src="{{ asset($banner->banner_image) }}" alt="banner"
                        style="width:100px;height:100px;object-fit:cover;border-radius:12px;flex-shrink:0;border:1px solid #e5e7eb;">
                @else
                    <div
                        style="width:100px;height:100px;border-radius:12px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #e5e7eb;">
                        <i class="ri-image-line" style="font-size:32px;color:#9ca3af;"></i>
                    </div>
                @endif
                <div class="banner-info-content">

                    <div class="d-flex align-items-center gap-2 mb-1">
                        <h4 class="fw-bold mb-0" style="color:#111827;">{{ $banner->name }}</h4>
                        <span class="status-badge-{{ $banner->status }}">{{ ucfirst($banner->status) }}</span>
                    </div>

                    <div style="font-size:13px;color:#6b7280;">
                        Platform: <strong style="color:#374151;">{{ ucfirst($banner->platform) }}</strong>
                        &nbsp;·&nbsp;
                        {{ $banner->sections->count() }} Section{{ $banner->sections->count() != 1 ? 's' : '' }}
                        &nbsp;·&nbsp;
                        Created on {{ $banner->created_at->format('d M Y') }}
                        @if ($banner->createdBy)
                            by <strong style="color:#374151;">{{ $banner->createdBy->name }}</strong>
                        @endif
                    </div>
                    @if ($banner->updatedBy)
                        <div style="font-size:12px;color:#9ca3af;margin-top:4px;">
                            Last updated {{ $banner->updated_at->format('d M Y, h:i A') }}
                            by {{ $banner->updatedBy->name }}
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Sections Table --}}
        <div class="fb-container">
            <div class="fb-filter-row">
                <h6 class="fw-semibold mb-0" style="color:#374151;">Sections
                    <span style="font-size:13px;color:#9ca3af;font-weight:400;">({{ $banner->sections->count() }}
                        total)</span>
                </h6>
            </div>
            @if ($banner->sections->isEmpty())
                <div class="text-center text-muted py-5">No sections added to this banner.</div>
            @else
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="all-table-head">
                            <tr>
                                <th class="table-head-content" style="width:60px;">Order</th>
                                <th class="table-head-content">Section Name</th>
                                <th class="table-head-content">Category</th>
                                <th class="table-head-content">From Date</th>
                                <th class="table-head-content">To Date</th>
                                <th class="table-head-content">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($banner->sections as $section)
                                <tr>
                                    <td class="table-body-content text-center">{{ $loop->iteration }}</td>
                                    <td class="table-body-content">
                                        <div class="fw-semibold" style="font-size:13px;color:#111827;">{{ $section->name }}
                                        </div>
                                    </td>
                                    <td class="table-body-content" style="font-size:13px;color:#6b7280;">
                                        {{ $section->category?->name ?? '—' }}
                                    </td>
                                    <td class="table-body-content" style="font-size:13px;">
                                        {{ $section->pivot->from_date ? \Carbon\Carbon::parse($section->pivot->from_date)->format('d/m/Y') : '—' }}
                                    </td>
                                    <td class="table-body-content" style="font-size:13px;">
                                        {{ $section->pivot->to_date ? \Carbon\Carbon::parse($section->pivot->to_date)->format('d/m/Y') : '—' }}
                                    </td>
                                    <td class="table-body-content">
                                        <span class="status-badge-{{ $section->pivot->status }}">
                                            {{ ucfirst($section->pivot->status) }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

    </section>

    {{-- Status Modal --}}
    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header {{ $banner->status === 'active' ? 'inactive-header' : 'activate-header' }}"
                    style="height:60px;">
                    <h5 class="mt-2">{{ $banner->status === 'active' ? 'Inactivate Banner' : 'Activate Banner' }}</h5>
                </div>
                <div class="modal-body">
                    <p class="mb-1">
                        {{ $banner->status === 'active' ? 'Inactivate' : 'Activate' }}
                        <strong>{{ $banner->name }}</strong>?
                    </p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="statusConfirm"
                        class="{{ $banner->status === 'active' ? 'btn-inactive-action' : 'btn-activate-action' }}">
                        {{ $banner->status === 'active' ? 'Inactivate' : 'Activate' }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteModal" 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>{{ $banner->name }}</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="deleteConfirm" class="btn-delete-action">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

        function openStatusModal() {
            new bootstrap.Modal(document.getElementById('statusModal')).show();
        }

        function openDeleteModal() {
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }

        $('#statusConfirm').on('click', function() {
            $(this).prop('disabled', true);
            var next = STATUS === 'active' ? 'inactive' : 'active';
            $.ajax({
                url: BASE + '/' + ID + '/status',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'PATCH',
                    status: next
                },
                success: function() {
                    toastr.success('Status updated.');
                    setTimeout(() => location.reload(), 700);
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#statusConfirm').prop('disabled', false);
                }
            });
        });

        $('#deleteConfirm').on('click', function() {
            $(this).prop('disabled', true).text('Deleting…');
            $.ajax({
                url: BASE + '/' + ID + '/destroy',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'DELETE'
                },
                success: function() {
                    toastr.success('Banner deleted.');
                    setTimeout(() => window.location =
                        "{{ route('backend.template.manage-content.index') }}", 700);
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#deleteConfirm').prop('disabled', false).text('Delete');
                }
            });
        });
    </script>
@endsection