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

@section('content')
<section>

    <div class="d-flex align-items-center 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">Create Banner</h2>
        </a>
    </div>

    <form id="bannerForm" action="{{ route('backend.template.manage-content.store') }}"
          method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="save_as_draft" id="saveAsDraft" value="0">
        <input type="hidden" name="status"        id="formStatus"   value="active">
        <div id="sectionsDataContainer"></div>

        <div class="row g-3">

            {{-- ── LEFT: Banner Details ──────────────────────────── --}}
            <div class="col-lg-5">
                <div class="custom-card2">
                    <h5 class="card-title-custom mb-4">Banner Details</h5>

                    <div class="mb-3">
                        <label class="custom-label">Banner Name <span class="text-danger">*</span></label>
                        <input type="text" id="bannerNameInput" name="name" value="{{ old('name') }}"
                               class="form-control custom-input @error('name') is-invalid @enderror"
                               placeholder="Enter banner name"
                               oninput="onBannerNameChange(this.value)">
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="custom-label">Platform <span class="text-danger">*</span></label>
                            <select name="platform"
                                    class="form-select custom-input @error('platform') is-invalid @enderror">
                                <option value="">Select</option>
                                <option value="mobile" {{ old('platform') === 'mobile' ? 'selected' : '' }}>Mobile</option>
                                <option value="web"    {{ old('platform') === 'web'    ? 'selected' : '' }}>Web</option>
                            </select>
                            @error('platform')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="custom-label d-block">Banner Status</label>
                            <div class="d-flex align-items-center gap-4 mt-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="status_radio"
                                           id="statusActive" value="active" checked>
                                    <label class="form-check-label ms-1" for="statusActive"
                                           style="color:#0AA437;font-weight:500;">Active</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="status_radio"
                                           id="statusInactive" value="inactive">
                                    <label class="form-check-label ms-1" for="statusInactive">Inactive</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="custom-label">Banner Image <span class="text-danger">*</span></label>
                        <div class="upload-dropzone text-center p-4 rounded-3 position-relative"
                             style="border:2px dashed #e5e7eb;cursor:pointer;min-height:130px;
                                    display:flex;align-items:center;justify-content:center;">
                            <img src="" class="previewImage d-none" alt="preview"
                                 style="max-height:140px;object-fit:contain;border-radius:8px;">
                            <div class="uploadContent text-center">
                                <i class="ri-image-add-line" style="font-size:36px;color:#9ca3af;"></i>
                                <p class="mb-1 mt-1" style="font-size:13px;color:#6b7280;font-weight:500;">
                                    Click to Upload or drag and drop
                                </p>
                                <p class="mb-0" style="font-size:11px;color:#9ca3af;">
                                    Upload image format should be only PNG, JPG or JPEG.<br>
                                    Also, max file size should be 10MB
                                </p>
                            </div>
                            <input type="file" name="banner_image" id="bannerImageInput"
                                   accept="image/png,image/jpg,image/jpeg"
                                   class="position-absolute top-0 start-0 w-100 h-100 opacity-0"
                                   style="cursor:pointer;">
                        </div>
                        @error('banner_image')
                            <div class="text-danger mt-1" style="font-size:12px;">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-1">
                        <label class="custom-label">
                            Short Description
                            <span style="font-size:11px;color:#9ca3af;font-weight:400;">(only for internal purpose)</span>
                        </label>
                        <textarea name="short_description" rows="6"
                                  class="form-control custom-input"
                                  style="min-height:130px;resize:vertical;"
                                  placeholder="Type here...">{{ old('short_description') }}</textarea>
                    </div>

                </div>
            </div>

            {{-- ── RIGHT: Select Categories ──────────────────────── --}}
            <div class="col-lg-7">
                <div class="custom-card2">

                    <div class="bcp-header">
                        <h5 class="card-title-custom mb-0">Select Categories</h5>
                        <span class="bcp-selected-label">
                            Selected Categories:&nbsp;<span id="selectedCatCount">00</span>
                        </span>
                    </div>

                    @error('sections')
                        <div class="alert alert-danger py-2 px-3 mb-3" style="font-size:13px;">{{ $message }}</div>
                    @enderror

                    @forelse($categories as $category)
                    @php $secCount = $category->sections->count(); @endphp
                    <div class="bcp-item" data-cat-id="{{ $category->id }}">

                        {{-- Category Header --}}
                        <div class="bcp-cat-row" onclick="toggleCategory({{ $category->id }})">
                            <input type="checkbox" id="cat-chk-{{ $category->id }}"
                                   class="form-check-input"
                                   style="width:18px;height:18px;flex-shrink:0;cursor:pointer;"
                                   onclick="event.stopPropagation(); toggleCategory({{ $category->id }})">
                            @if($category->image)
                                <img src="{{ asset('storage/' . $category->image) }}" class="bcp-cat-img" alt="">
                            @else
                                <div class="bcp-cat-img d-flex align-items-center justify-content-center">
                                    <i class="ri-image-line" style="font-size:14px;color:#9ca3af;"></i>
                                </div>
                            @endif
                            <span class="bcp-cat-name">{{ $category->name }}</span>
                            @if($secCount)
                                <span class="bcp-cat-count">+ {{ $secCount }} sections</span>
                            @endif
                            <i class="ri-arrow-up-s-line bcp-chevron" id="chevron-{{ $category->id }}"></i>
                        </div>

                        {{-- Sections (collapsed by default) --}}
                        <div class="bcp-sec-list" id="sec-list-{{ $category->id }}" style="display:none;">

                            {{-- Banner slot (pinned, not draggable) --}}
                            <div class="bcp-banner-slot">
                                <div class="bcp-banner-slot-name">
                                    <div class="bcp-banner-slot-icon">
                                        <i class="ri-image-line" style="font-size:13px;color:#0AA437;"></i>
                                    </div>
                                    <span class="bcp-banner-name-text">[Banner Name]</span>
                                    <button type="button" class="bcp-schedule-toggle ms-auto"
                                            onclick="event.stopPropagation(); toggleSchedule(this)">
                                        <i class="ri-calendar-schedule-line"></i> Schedule
                                    </button>
                                </div>
                                <div class="bcp-sec-dates" style="display:none;margin-top:10px;">
                                    <div class="date-group">
                                        <label>From</label>
                                        <input type="date" class="form-control custom-input banner-from-date"
                                               onclick="event.stopPropagation();">
                                    </div>
                                    <div class="date-group">
                                        <label>To</label>
                                        <input type="date" class="form-control custom-input banner-to-date"
                                               onclick="event.stopPropagation();">
                                    </div>
                                </div>
                            </div>

                            @if($secCount)
                            <table class="bcp-sec-table">
                                <thead class="bcp-sec-thead">
                                    <tr>
                                        <th style="width:28px;"></th>
                                        <th style="width:60px;">Sec. No</th>
                                        <th>Section Name</th>
                                    </tr>
                                </thead>
                                <tbody id="sec-body-{{ $category->id }}">
                                    @foreach($category->sections as $sec)
                                    <tr class="bcp-sec-row"
                                        data-section-id="{{ $sec->id }}"
                                        data-cat-id="{{ $category->id }}">
                                        <td><i class="ri-drag-move-fill bcp-drag"></i></td>
                                        <td class="bcp-sec-num">{{ $loop->iteration }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($sec->background_image)
                                                    <img src="{{ asset('storage/' . $sec->background_image) }}"
                                                         class="bcp-sec-img" alt="">
                                                @else
                                                    <div class="bcp-sec-img d-flex align-items-center justify-content-center">
                                                        <i class="ri-image-line" style="font-size:11px;color:#9ca3af;"></i>
                                                    </div>
                                                @endif
                                                <span style="font-size:13px;color:#374151;">{{ $sec->name }}</span>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            @else
                                <p class="text-muted text-center py-3 mb-0" style="font-size:13px;border-top:1px solid #e5e7eb;">
                                    No active sections in this category.
                                </p>
                            @endif

                        </div>{{-- /.bcp-sec-list --}}

                    </div>
                    @empty
                        <p class="text-muted text-center py-4">No active categories found.</p>
                    @endforelse

                </div>
            </div>

        </div>{{-- /.row --}}

        {{-- Bottom Buttons --}}
        <div class="d-flex justify-content-end gap-3 mt-4">
            <a href="{{ route('backend.template.manage-content.index') }}"
               class="btn-cancel" style="display:inline-flex;align-items:center;">Cancel</a>
            <button type="button" class="button-green px-4" onclick="openConfirmModal()" style="height:40px;">
                Create Banner
            </button>
        </div>

    </form>

</section>

{{-- Confirm Modal --}}
<div class="modal fade" id="confirmBannerModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:480px;">
        <div class="modal-content" style="border-radius:16px;overflow:hidden;border:none;">
            <div style="background:#dcfce7;padding:24px 24px 16px;">
                <h5 class="fw-bold mb-0" style="color:#166534;">Create Banner</h5>
            </div>
            <div class="modal-body" style="padding:20px 24px 12px;">
                <p class="fw-semibold mb-1" style="color:#111827;font-size:14px;">
                    Are you sure you want to create this banner?
                </p>
                <p class="mb-4" style="font-size:13px;color:#6b7280;line-height:1.5;">
                    The banner will become available for the selected categories based on its
                    status and visibility settings.
                </p>
                <table id="confirmSummaryTable"
                       style="width:100%;border-collapse:collapse;border:1px solid #e5e7eb;
                              border-radius:8px;overflow:hidden;">
                    <tr>
                        <td style="padding:10px 14px;border-bottom:1px solid #e5e7eb;
                                   font-size:13px;color:#6b7280;background:#f9fafb;width:55%;">
                            Banner Name
                        </td>
                        <td id="confirmBannerName"
                            style="padding:10px 14px;border-bottom:1px solid #e5e7eb;
                                   font-size:13px;color:#374151;font-weight:600;text-align:right;">
                        </td>
                    </tr>
                    {{-- Category rows injected by JS --}}
                </table>
            </div>
            <div style="padding:16px 24px 24px;display:flex;justify-content:flex-end;gap:12px;">
                <button class="btn-cancel" data-bs-dismiss="modal"
                        style="display:inline-flex;align-items:center;">Cancel</button>
                <button class="button-green px-4" style="height:40px;" onclick="finalSubmit()">
                    Create Banner
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
<script>
// { catId: true } — tracks which categories are selected
var selectedCategories = {};

/* ── Image preview ──────────────────────────────────────── */
document.getElementById('bannerImageInput').addEventListener('change', function () {
    var file = this.files[0];
    if (!file) return;
    new FileReader().onload = function (e) {
        document.querySelector('.previewImage').src = e.target.result;
        document.querySelector('.previewImage').classList.remove('d-none');
        document.querySelector('.uploadContent').style.display = 'none';
    };
    var fr = new FileReader();
    fr.onload = function (e) {
        document.querySelector('.previewImage').src = e.target.result;
        document.querySelector('.previewImage').classList.remove('d-none');
        document.querySelector('.uploadContent').style.display = 'none';
    };
    fr.readAsDataURL(file);
});

/* ── Schedule toggle ────────────────────────────────────── */
function toggleSchedule(btn) {
    var dates = btn.closest('.bcp-banner-slot').querySelector('.bcp-sec-dates');
    var isOpen = dates.style.display !== 'none';
    dates.style.display = isOpen ? 'none' : 'flex';
    btn.classList.toggle('active', !isOpen);
}

/* ── Banner name → update all banner slots ──────────────── */
function onBannerNameChange(val) {
    var display = val.trim() || '[Banner Name]';
    document.querySelectorAll('.bcp-banner-name-text').forEach(function (el) {
        el.textContent = display;
    });
}

/* ── Toggle category selection ──────────────────────────── */
function toggleCategory(catId) {
    var list    = document.getElementById('sec-list-' + catId);
    var chevron = document.getElementById('chevron-' + catId);
    var chk     = document.getElementById('cat-chk-' + catId);

    if (selectedCategories[catId]) {
        // Deselect → collapse
        delete selectedCategories[catId];
        chk.checked             = false;
        list.style.display      = 'none';
        chevron.classList.remove('open');
    } else {
        // Select → expand
        selectedCategories[catId] = true;
        chk.checked             = true;
        list.style.display      = 'block';
        chevron.classList.add('open');
    }
    updateCounter();
}

function updateCounter() {
    var count = Object.keys(selectedCategories).length;
    document.getElementById('selectedCatCount').textContent = String(count).padStart(2, '0');
}

/* ── Sortable for each category's section body ──────────── */
document.querySelectorAll('[id^="sec-body-"]').forEach(function (tbody) {
    new Sortable(tbody, {
        animation: 150,
        handle: '.bcp-drag',
        onEnd: function () {
            tbody.querySelectorAll('.bcp-sec-num').forEach(function (cell, i) {
                cell.textContent = i + 1;
            });
        }
    });
});

/* ── Confirm modal ──────────────────────────────────────── */
function openConfirmModal() {
    var name = document.getElementById('bannerNameInput').value.trim();
    if (!name) { toastr.warning('Please enter a banner name.'); return; }
    if (!Object.keys(selectedCategories).length) {
        toastr.warning('Please select at least one category.');
        return;
    }

    document.getElementById('confirmBannerName').textContent = name;

    var table = document.getElementById('confirmSummaryTable');
    table.querySelectorAll('.confirm-cat-row').forEach(function (el) { el.remove(); });

    var catNum = 1;
    var keys   = Object.keys(selectedCategories);
    document.querySelectorAll('.bcp-item').forEach(function (item) {
        var catId = item.getAttribute('data-cat-id');
        if (!selectedCategories[catId]) return;

        var catName  = item.querySelector('.bcp-cat-name').textContent.trim();
        var secCount = item.querySelectorAll('.bcp-sec-row').length;
        var isLast   = catNum === keys.length;
        var borderB  = isLast ? '' : 'border-bottom:1px solid #e5e7eb;';

        var tr = document.createElement('tr');
        tr.className = 'confirm-cat-row';
        tr.innerHTML =
            '<td style="padding:10px 14px;' + borderB + 'font-size:13px;color:#6b7280;background:#f9fafb;">CAT ' + catNum + ': ' + catName + '</td>' +
            '<td style="padding:10px 14px;' + borderB + 'font-size:13px;color:#374151;font-weight:600;text-align:right;">' + secCount + ' Section' + (secCount !== 1 ? 's' : '') + '</td>';
        table.appendChild(tr);
        catNum++;
    });

    new bootstrap.Modal(document.getElementById('confirmBannerModal')).show();
}

/* ── Final submit ────────────────────────────────────────── */
function finalSubmit() {
    var container = document.getElementById('sectionsDataContainer');
    container.innerHTML = '';
    var idx = 0;

    document.querySelectorAll('.bcp-item').forEach(function (item) {
        var catId = item.getAttribute('data-cat-id');
        if (!selectedCategories[catId]) return;

        var fromDate = item.querySelector('.banner-from-date').value;
        var toDate   = item.querySelector('.banner-to-date').value;

        item.querySelectorAll('#sec-body-' + catId + ' .bcp-sec-row').forEach(function (row) {
            var sId = row.getAttribute('data-section-id');
            addHidden(container, 'sections[' + idx + '][section_id]', sId);
            addHidden(container, 'sections[' + idx + '][from_date]',  fromDate);
            addHidden(container, 'sections[' + idx + '][to_date]',    toDate);
            addHidden(container, 'sections[' + idx + '][sort_order]', idx);
            addHidden(container, 'sections[' + idx + '][status]',     'active');
            idx++;
        });
    });

    if (!idx) { toastr.warning('No sections to submit.'); return; }

    var radio = document.querySelector('input[name="status_radio"]:checked');
    document.getElementById('formStatus').value  = radio ? radio.value : 'active';
    document.getElementById('saveAsDraft').value = '0';
    document.getElementById('bannerForm').submit();
}

function addHidden(parent, name, value) {
    var inp = document.createElement('input');
    inp.type = 'hidden'; inp.name = name; inp.value = value;
    parent.appendChild(inp);
}
</script>
@endsection