@extends('admin.layout.dashboard_master')

@section('content')
<main id="main" class="main">

    <div class="pagetitle">
        <h1>Banner</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">American Plastic</a></li>
                <li class="breadcrumb-item">Dashboard</li>
                <li class="breadcrumb-item active">Banner</li>
            </ol>
        </nav>
    </div>

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Banner Management & Preview</h5>
                        <p class="text-muted">Manage your site banners using the interactive mock-up or see the live results in the preview window.</p>

                        <!-- Nav Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered mb-3" id="bannerTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="mockup-tab" data-bs-toggle="tab" data-bs-target="#mockup-content" type="button" role="tab" aria-controls="mockup-content" aria-selected="true">
                                    <i class="bi bi-display me-1"></i> Interactive Mock-up
                                </button>
                            </li>
                             <li class="nav-item" role="presentation">
                                <button class="nav-link" id="live-tab" data-bs-toggle="tab" data-bs-target="#live-content" type="button" role="tab" aria-controls="live-content" aria-selected="false">
                                    <i class="bi bi-globe me-1"></i> Live Site Preview
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="slideshow-tab" data-bs-toggle="tab" data-bs-target="#slideshow-content" type="button" role="tab" aria-controls="slideshow-content" aria-selected="false">
                                    <i class="bi bi-images me-1"></i> Hero Slideshow
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content pt-2" id="bannerTabContent">
                            <!-- Interactive Mock-up Tab -->
                            <div class="tab-pane fade show active" id="mockup-content" role="tabpanel" aria-labelledby="mockup-tab">
                                <form id="banner_form" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <!-- Hidden File Inputs -->
                                    <input type="file" name="banner_img_one" id="banner_img_one" class="d-none" onchange="previewImage(this, 'preview_one')">
                                    <input type="file" name="banner_img_two" id="banner_img_two" class="d-none" onchange="previewImage(this, 'preview_two')">
                                    <input type="file" name="side_banner_one" id="side_banner_one" class="d-none" onchange="previewImage(this, 'preview_side_one')">
                                    <input type="file" name="side_banner_two" id="side_banner_two" class="d-none" onchange="previewImage(this, 'preview_side_two')">

                                    <div class="site-preview-container p-3 border rounded shadow-sm bg-light">
                                        <h6 class="text-center mb-3">Home Page Layout Mock-up</h6>
                                        
                                        <!-- Hero Slideshow Preview -->
                                        <div class="preview-section mb-4">
                                            <div class="preview-label">Hero Slideshow (1727 x 915)</div>
                                            <div class="hero-preview-box interactive-slot shadow-sm" onclick="document.getElementById('banner_img_one').click()">
                                                <img id="preview_one" src="{{ $banner && $banner->banner_one ? asset('assets/images/slideshow-banners/' . $banner->banner_one) : asset('admin/assets/img/exbanner.png') }}" class="img-fluid rounded">
                                                <div class="slot-overlay"><i class="bi bi-camera-fill me-2"></i> Change Hero Banner</div>
                                            </div>
                                        </div>

                                        <!-- Middle Banners (Quality/Certifications) Preview -->
                                        <div class="preview-section mb-4">
                                            <div class="preview-label">Certifications / Quality Banners (1280 x 640 each)</div>
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <div class="side-preview-box interactive-slot shadow-sm" onclick="document.getElementById('side_banner_one').click()">
                                                        <img id="preview_side_one" src="{{ $banner && $banner->side_banner_one ? asset('assets/images/home/' . $banner->side_banner_one) : asset('admin/assets/img/exbanner.png') }}" class="img-fluid rounded">
                                                        <div class="slot-overlay"><i class="bi bi-camera-fill me-2"></i> Change Certifications Banner 1</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="side-preview-box interactive-slot shadow-sm" onclick="document.getElementById('side_banner_two').click()">
                                                        <img id="preview_side_two" src="{{ $banner && $banner->side_banner_two ? asset('assets/images/home/' . $banner->side_banner_two) : asset('admin/assets/img/exbanner.png') }}" class="img-fluid rounded">
                                                        <div class="slot-overlay"><i class="bi bi-camera-fill me-2"></i> Change Certifications Banner 2</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- About Us Banner Preview -->
                                        <div class="preview-section">
                                            <div class="preview-label">"Who We Are" Banner (1728 x 375)</div>
                                            <div class="footer-preview-box interactive-slot shadow-sm" onclick="document.getElementById('banner_img_two').click()">
                                                <img id="preview_two" src="{{ $banner && $banner->banner_two ? asset('admin/assets/banner/' . $banner->banner_two) : asset('admin/assets/img/exbanner.png') }}" class="img-fluid rounded">
                                                <div class="slot-overlay"><i class="bi bi-camera-fill me-2"></i> Change About Us Banner</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="upload_progress_container" class="mt-4 mb-3 d-none">
                                        <div class="progress" style="height: 25px;">
                                            <div id="upload_progress_bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                        </div>
                                        <p class="text-center mt-2 small text-muted"><i class="bi bi-cloud-arrow-up me-1"></i> Uploading banners, please wait...</p>
                                    </div>

                                    <div class="row mt-4 mb-3">
                                        <div class="col-md-12 text-center">
                                            <button type="button" class="btn btn-lg btn-outline-secondary me-2 px-4 rounded-pill" onclick="clearBannerForm()">Reset Changes</button>
                                            <button type="button" class="btn btn-lg btn-primary px-5 rounded-pill shadow" onclick="updateBanner()">Update Banners</button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!-- Live Site Preview Tab -->
                            <div class="tab-pane fade" id="live-content" role="tabpanel" aria-labelledby="live-tab">
                                <div class="live-preview-controls d-flex justify-content-between align-items-center mb-3 p-2 bg-light border rounded">
                                    <div class="view-toggles">
                                        <button class="btn btn-sm btn-outline-primary active me-2" onclick="setIframeView('desktop')">
                                            <i class="bi bi-laptop"></i> Desktop
                                        </button>
                                        <button class="btn btn-sm btn-outline-primary" onclick="setIframeView('mobile')">
                                            <i class="bi bi-phone"></i> Mobile
                                        </button>
                                    </div>
                                    <div class="refresh-control">
                                        <button class="btn btn-sm btn-secondary" onclick="refreshIframe()">
                                            <i class="bi bi-arrow-clockwise"></i> Refresh Live View
                                        </button>
                                    </div>
                                </div>
                                <div class="iframe-container shadow-sm border rounded bg-white text-center" style="height: 800px; overflow: hidden;">
                                    <iframe id="live-site-iframe" src="{{ route('american.plastic.web') }}" style="width: 100%; height: 100%; border: none; transition: width 0.3s ease;"></iframe>
                                </div>
                            </div>

                            <!-- Hero Slideshow Tab -->
                            <div class="tab-pane fade" id="slideshow-content" role="tabpanel" aria-labelledby="slideshow-tab">
                                <div class="row">
                                    <!-- Add New Slide Form -->
                                    <div class="col-lg-4">
                                        <div class="card bg-light border-0 shadow-sm">
                                            <div class="card-body">
                                                <h5 class="card-title">Add New Hero Slide</h5>
                                                <form id="hero_slide_form" enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="mb-3">
                                                        <label class="form-label">Hero Image (1727 x 915)</label>
                                                        <div class="hero-upload-box border rounded p-2 text-center bg-white" onclick="document.getElementById('new_hero_image').click()" style="cursor: pointer;">
                                                            <img id="new_hero_preview" src="{{ asset('admin/assets/img/exbanner.png') }}" class="img-fluid rounded mb-2">
                                                            <div class="small text-muted"><i class="bi bi-camera-fill me-1"></i> Click to Upload</div>
                                                        </div>
                                                        <input type="file" name="hero_image" id="new_hero_image" class="d-none" onchange="previewHeroImage(this)">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label">Title</label>
                                                        <input type="text" name="title" class="form-control" placeholder="e.g. Discover Eco-Friendly Products">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label">Description</label>
                                                        <textarea name="description" class="form-control" rows="2" placeholder="Short caption for the slide"></textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label">Button Link</label>
                                                        <input type="text" name="link" class="form-control" placeholder="e.g. /shop">
                                                    </div>
                                                    <div class="d-grid">
                                                        <button type="button" id="add_slide_btn" class="btn btn-primary" onclick="addHeroSlide()">
                                                            <i class="bi bi-plus-circle me-1"></i> Add Hero Slide
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Existing Slides List -->
                                    <div class="col-lg-8">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body">
                                                <h5 class="card-title">Manage Existing Slides</h5>
                                                <div class="table-responsive">
                                                    <table class="table table-hover align-middle">
                                                        <thead class="bg-light">
                                                            <tr>
                                                                <th style="width: 150px;">Preview</th>
                                                                <th>Details</th>
                                                                <th style="width: 100px;">Actions</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="hero_slides_list">
                                                            @forelse($heroSlides as $slide)
                                                            <tr id="slide_row_{{ $slide->id }}">
                                                                <td>
                                                                    <img src="{{ asset('assets/images/slideshow-banners/' . $slide->banner_image) }}" class="img-fluid rounded shadow-sm">
                                                                </td>
                                                                <td>
                                                                    <div class="fw-bold">{{ $slide->banner_title ?: 'Untitled Slide' }}</div>
                                                                    <div class="small text-muted">{{ Str::limit($slide->banner_description, 60) }}</div>
                                                                    <div class="small text-primary">{{ $slide->banner_link }}</div>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-sm btn-outline-danger" onclick="deleteHeroSlide({{ $slide->id }})">
                                                                        <i class="bi bi-trash"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            @empty
                                                            <tr>
                                                                <td colspan="3" class="text-center py-4 text-muted">
                                                                    <i class="bi bi-info-circle me-1"></i> No hero slides added yet.
                                                                </td>
                                                            </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <style>
                .preview-label {
                    font-size: 0.85rem;
                    font-weight: 600;
                    color: #555;
                    margin-bottom: 5px;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }

                .interactive-slot {
                    position: relative;
                    cursor: pointer;
                    overflow: hidden;
                    border: 2px dashed #ccc;
                    transition: all 0.3s ease;
                    background: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .interactive-slot:hover {
                    border-color: #0d6efd;
                    transform: translateY(-2px);
                }

                .interactive-slot img {
                    width: 100%;
                    height: auto;
                    transition: filter 0.3s ease;
                }

                .interactive-slot:hover img {
                    filter: brightness(0.6);
                }

                .slot-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-weight: bold;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    background: rgba(13, 110, 253, 0.2);
                }

                .interactive-slot:hover .slot-overlay {
                    opacity: 1;
                }

                .hero-preview-box {
                    aspect-ratio: 1727 / 915;
                    max-height: 300px;
                }

                .side-preview-box {
                    aspect-ratio: 2 / 1;
                }

                .footer-preview-box {
                    aspect-ratio: 1728 / 375;
                    max-height: 150px;
                }


                /* Iframe Preview Styles */
                .iframe-container {
                    background: #f8f9fa;
                    padding: 10px;
                    border: 1px solid #dee2e6;
                }
                
                #live-site-iframe {
                    box-shadow: 0 0 20px rgba(0,0,0,0.1);
                    margin: 0 auto;
                    display: block;
                }
                
                .view-toggles .btn.active {
                    background-color: #0d6efd !important;
                    color: white !important;
                }
            </style>

        </div>
    </div>

</main>

<script>
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    function updateBanner() {

        let form = $('#banner_form')[0];
        let formData = new FormData(form);

        $.ajax({
            type: 'POST',
            url: "{{ route('admin.add.banner') }}",
            data: formData,
            contentType: false,
            processData: false,

            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = Math.round((evt.loaded / evt.total) * 100);
                        $('#upload_progress_bar').css('width', percentComplete + '%').text(percentComplete + '%').attr('aria-valuenow', percentComplete);
                    }
                }, false);
                return xhr;
            },

            beforeSend: function() {
                $('#upload_progress_container').removeClass('d-none');
                $('#upload_progress_bar').css('width', '0%').text('0%');
                $('button[onclick="updateBanner()"]').prop('disabled', true);
            },

            success: function(response) {

                if (response.code === 'true') {
                    Alert.success(response.msg, 'Success', {
                        displayDuration: 3000,
                        pos: 'top'
                    });
                } else {
                    Alert.error(response.msg, 'Error', {
                        displayDuration: 3000
                    });
                }

            },

            complete: function() {
                setTimeout(function() {
                    $('#upload_progress_container').addClass('d-none');
                    $('button[onclick="updateBanner()"]').prop('disabled', false);
                }, 1000);
            },

            error: function(xhr) {
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    let firstError = Object.values(errors)[0][0];
                    Alert.error(firstError, 'Validation Error', {
                        displayDuration: 5000
                    });
                } else if (xhr.status === 401) {
                    Alert.error("Your session has expired. Please log in again.", "Unauthenticated", {
                        displayDuration: 5000
                    });
                } else if (xhr.status === 419) {
                    Alert.error("CSRF token mismatch or session expired. Please refresh the page.", "Page Expired", {
                        displayDuration: 5000
                    });
                } else {
                    let errorMsg = "An unexpected error occurred (" + xhr.status + ").";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg += " " + xhr.responseJSON.message;
                    }
                    Alert.error(errorMsg, "Server Error", {
                        displayDuration: 5000
                    });
                }
            }

        });

    }

    // clear form
    function clearBannerForm() {
    let form = document.getElementById('banner_form');

    // Reset all input fields
    form.reset();

    // Reset previews to original state (from PHP)
    $('#preview_one').attr('src', '{{ $banner && $banner->banner_one ? asset('assets/images/slideshow-banners/' . $banner->banner_one) : asset('admin/assets/img/exbanner.png') }}');
    $('#preview_two').attr('src', '{{ $banner && $banner->banner_two ? asset('admin/assets/banner/' . $banner->banner_two) : asset('admin/assets/img/exbanner.png') }}');
    $('#preview_side_one').attr('src', '{{ $banner && $banner->side_banner_one ? asset('assets/images/home/' . $banner->side_banner_one) : asset('admin/assets/img/exbanner.png') }}');
    $('#preview_side_two').attr('src', '{{ $banner && $banner->side_banner_two ? asset('assets/images/home/' . $banner->side_banner_two) : asset('admin/assets/img/exbanner.png') }}');

    Alert.success('All fields have been cleared.', 'Cleared', {
        displayDuration: 2000,
        pos: 'top'
    });
}

function previewImage(input, previewId) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#' + previewId).attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}


    function setIframeView(view) {
        const iframe = document.getElementById('live-site-iframe');
        const btns = document.querySelectorAll('.view-toggles .btn');
        
        btns.forEach(btn => btn.classList.remove('active'));
        
        if (view === 'desktop') {
            iframe.style.width = '100%';
        } else if (view === 'mobile') {
            iframe.style.width = '375px';
        }
        
        // Add active class to the clicked button
        event.currentTarget.classList.add('active');
    }

    function refreshIframe() {
        const iframe = document.getElementById('live-site-iframe');
        iframe.src = iframe.src;
        
        // Show a brief loading indicator/toast if possible
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Refreshing Preview...',
                timer: 800,
                timerProgressBar: true,
                didOpen: () => {
                    Swal.showLoading()
                }
            });
        }
    }

    // Hero Slideshow Management Functions
    function previewHeroImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#new_hero_preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function addHeroSlide() {
        let form = $('#hero_slide_form')[0];
        let formData = new FormData(form);

        if (!$('#new_hero_image')[0].files[0]) {
            Alert.error("Please select a hero image first.", "Required", { displayDuration: 3000 });
            return;
        }

        $.ajax({
            type: 'POST',
            url: "{{ route('admin.add.hero.slide') }}",
            data: formData,
            contentType: false,
            processData: false,
            beforeSend: function() {
                $('#add_slide_btn').prop('disabled', true).html('<i class="bi bi-hourglass-split me-1"></i> Adding...');
            },
            success: function(response) {
                if (response.code === 'true') {
                    Alert.success(response.msg, 'Success', { displayDuration: 3000 });
                    setTimeout(() => location.reload(), 1500); // Reload to show new slide in list
                } else {
                    Alert.error(response.msg, 'Error', { displayDuration: 3000 });
                }
            },
            error: function(xhr) {
                $('#add_slide_btn').prop('disabled', false).html('<i class="bi bi-plus-circle me-1"></i> Add Hero Slide');
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    let firstError = Object.values(errors)[0][0];
                    Alert.error(firstError, 'Validation Error', { displayDuration: 5000 });
                } else {
                    Alert.error("An error occurred while adding the slide.", "Server Error");
                }
            }
        });
    }

    function deleteHeroSlide(id) {
        if (!confirm('Are you sure you want to delete this hero slide?')) return;

        $.ajax({
            type: 'POST',
            url: "{{ url('/admin/delete-hero-slide') }}/" + id,
            success: function(response) {
                if (response.code === 'true') {
                    $('#slide_row_' + id).fadeOut(300, function() { $(this).remove(); });
                    Alert.success(response.msg, 'Deleted', { displayDuration: 3000 });
                    refreshIframe();
                } else {
                    Alert.error(response.msg, 'Error');
                }
            },
            error: function() {
                Alert.error("An error occurred while deleting the slide.", "Server Error");
            }
        });
    }
</script>

@endsection