@extends('user.layouts')



@section('title', 'Advertisement')



@section('header')



<link rel="stylesheet" type="text/css"

    href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">



<link rel="stylesheet" type="text/css"

    href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">



<link rel="stylesheet" type="text/css"

    href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">



<style>

    .advertisement-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        margin-bottom: 25px;

    }



    .advertisement-header h3 {

        margin: 0;

    }



    .add-ad-btn {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        min-height: 42px;

        padding: 10px 20px;

        border: 0;

        border-radius: 10px;

        font-size: 14px;

        font-weight: 600;

        box-shadow: 0 4px 12px rgba(13, 110, 253, .18);

    }



    .add-ad-btn i {

        font-size: 13px;

    }



    .advertisement-form-card {

        display: none;

        margin-bottom: 25px;

        border: 1px solid #edf0f4 !important;

        border-radius: 15px !important;

        overflow: hidden;

    }



    .advertisement-form-card.show {

        display: block;

        animation: advertisementSlide .25s ease;

    }



    @keyframes advertisementSlide {

        from {

            opacity: 0;

            transform: translateY(-8px);

        }



        to {

            opacity: 1;

            transform: translateY(0);

        }

    }



    .advertisement-form-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding-bottom: 18px;

        margin-bottom: 24px;

        border-bottom: 1px solid #edf0f4;

    }



    .advertisement-form-header h5 {

        margin: 0;

        font-size: 18px;

        font-weight: 700;

    }



    .advertisement-form-header p {

        margin: 5px 0 0;

        color: #6c757d;

        font-size: 13px;

    }



    .close-ad-form {

        width: 36px;

        height: 36px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 9px;

        background: #f5f6f8;

        color: #6b7280;

        transition: .2s;

    }



    .close-ad-form:hover {

        background: #e9ecef;

        color: #212529;

    }



    .advertisement-label {

        margin-bottom: 8px;

        font-size: 14px;

        font-weight: 600;

    }



    .advertisement-input {

        min-height: 46px;

        border-radius: 10px;

    }



    .ad-upload-wrapper {

        min-height: 230px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 2px dashed #c7d2fe;

        border-radius: 14px;

        padding: 30px 20px;

        cursor: pointer;

        background: #fafbff;

        transition: .2s;

    }



    .ad-upload-wrapper:hover {

        border-color: #4f46e5;

        background: #f8f9ff;

    }



    .upload-icon-holder {

        width: 58px;

        height: 58px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0 auto 14px;

        border-radius: 50%;

        background: #eef2ff;

    }



    .upload-icon {

        font-size: 24px;

        color: #4f46e5;

    }



    .click-to-upload {

        margin-bottom: 6px;

        font-size: 15px;

        font-weight: 600;

        color: #1f2937;

    }



    .upload-description {

        color: #6b7280;

        font-size: 12px;

    }



    .preview-image {

        width: 342px;

        max-width: 100%;

        height: 170px;

        object-fit: cover;

        border-radius: 10px;

        margin: auto;

        display: block;

    }



    .ad-form-actions {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 10px;

        padding-top: 5px;

    }



    .ad-form-actions .btn {

        min-height: 42px;

        padding: 9px 20px;

        border-radius: 9px;

        font-weight: 600;

        font-size: 14px;

    }



    .advertisement-list-card {

        border: 1px solid #edf0f4;

        border-radius: 15px;

        overflow: hidden;

    }



    .advertisement-list-title {

        font-size: 17px;

        font-weight: 700;

        margin: 0;

    }



    .advertisement-list-subtitle {

        margin: 4px 0 0;

        color: #6b7280;

        font-size: 13px;

    }



    .advertisement-thumbnail {
        width: 100px;
        height: 50px;
        border-radius: 7px;
        object-fit: cover;
        border: 1px solid #e5e7eb;
        cursor: pointer;
        transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
    }

    .advertisement-thumbnail:hover { transform: scale(1.05); opacity: .9; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
    .advertisement-image-modal .modal-dialog { max-width: 1100px; }
    .advertisement-image-modal .modal-content { border: 0; border-radius: 14px; overflow: hidden; }
    .advertisement-image-modal .modal-header { padding: 14px 18px; border-bottom: 1px solid #e5e7eb; }
    .advertisement-image-modal .modal-title { font-size: 16px; font-weight: 600; color: #1f2937; }
    .advertisement-image-modal .modal-body { padding: 20px; text-align: center; background: #f8fafc; }
    .full-advertisement-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 75vh; margin: 0 auto; object-fit: contain; border-radius: 10px; }
    .ad-image-loading { min-height: 200px; display: flex; align-items: center; justify-content: center; }
    body.dark-mode .advertisement-image-modal .modal-content { background: #1f2937 !important; border-color: #374151 !important; }
    body.dark-mode .advertisement-image-modal .modal-header { border-color: #374151 !important; }
    body.dark-mode .advertisement-image-modal .modal-title { color: #f9fafb !important; }
    body.dark-mode .advertisement-image-modal .modal-body { background: #111827 !important; }
    body.dark-mode .advertisement-image-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

    .status-badge {

        display: inline-flex;

        align-items: center;

        gap: 6px;

        padding: 6px 10px;

        border-radius: 20px;

        font-size: 12px;

        font-weight: 600;

    }



    .status-badge::before {

        content: "";

        width: 6px;

        height: 6px;

        border-radius: 50%;

        background: currentColor;

    }



    .status-active {

        color: #15803d;

        background: #dcfce7;

    }



    .status-inactive {

        color: #b45309;

        background: #fef3c7;

    }



    .action-btn {

        width: 35px;

        height: 35px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        padding: 0;

        border: 1px solid #e5e7eb;

        border-radius: 8px;

        background: #fff;

        transition: .2s;

    }



    .action-btn:hover {

        background: #f8fafc;

    }



    .delete-action {

        color: #dc2626;

    }



    .view-action {

        color: #2563eb;

    }



    body.dark-mode .advertisement-form-card,

    body.dark-mode .advertisement-list-card {

        border-color: #273449 !important;

    }



    body.dark-mode .advertisement-form-header {

        border-color: #273449;

    }



    body.dark-mode .ad-upload-wrapper {

        background: #111827;

        border-color: #475569;

    }



    body.dark-mode .ad-upload-wrapper:hover {

        background: #172033;

        border-color: #6366f1;

    }



    body.dark-mode .upload-icon-holder {

        background: #273449;

    }



    body.dark-mode .click-to-upload {

        color: #e2e8f0;

    }



    body.dark-mode .close-ad-form,

    body.dark-mode .action-btn {

        background: #273449;

        border-color: #374151;

        color: #e2e8f0;

    }



    @media(max-width: 576px) {

        .advertisement-header {

            align-items: flex-start;

            flex-direction: column;

        }



        .add-ad-btn {

            width: 100%;

        }



        .ad-form-actions {

            flex-direction: column-reverse;

        }



        .ad-form-actions .btn {

            width: 100%;

        }

    }

</style>



@endsection





@section('content')



<div class="container-fluid page-wrapper">



    <div class="advertisement-header">



        <div>

            <h3 class="page-top-heading">

                Advertisement

            </h3>

        </div>



      <button

    type="button"

    class="btn btn-primary add-ad-btn"

    onclick="window.location.href='{{ route('create_advertisement') }}'">



    <i class="fa-solid fa-plus"></i>



    Add Advertisement



</button>



    </div>





    <!-- ADD ADVERTISEMENT FORM -->



    <div

        class="card advertisement-form-card shadow-sm"

        id="advertisementFormCard">



        <div class="card-body p-4">



            <div class="advertisement-form-header">



                <div>



                    <h5>

                        Add Advertisement

                    </h5>



                    <p>

                        Create a new advertisement by entering the details below.

                    </p>



                </div>



                <button

                    type="button"

                    class="close-ad-form"

                    id="closeAdvertisementForm">



                    <i class="fa-solid fa-xmark"></i>



                </button>



            </div>





            <form

                action="{{ route('add_advertisement') }}"

                method="POST"

                enctype="multipart/form-data"

                id="addAdvertisementForm">



                @csrf





                <div class="row">



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



                        <div class="mb-4">



                            <label class="advertisement-label">



                                Advertisement Title



                                <span class="text-danger">*</span>



                            </label>



                            <input

                                type="text"

                                name="title"

                                class="form-control advertisement-input @error('title') is-invalid @enderror"

                                placeholder="Enter advertisement title"

                                value="{{ old('title') }}"

                                required>



                            @error('title')



                                <div class="invalid-feedback">



                                    {{ $message }}



                                </div>



                            @enderror



                        </div>



                    </div>





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



                        <div class="mb-4">



                            <label class="advertisement-label">



                                Advertisement Image



                                <span class="text-danger">*</span>



                                <small class="text-muted fw-normal ms-1">

                                    Recommended size: 342px × 170px

                                </small>



                            </label>





                            <div

                                class="ad-upload-wrapper text-center"

                                id="ad-upload-wrapper">





                                <div id="ad-upload-conditions">



                                    <div class="upload-icon-holder">



                                        <i class="fa-solid fa-cloud-arrow-up upload-icon"></i>



                                    </div>



                                    <p class="click-to-upload">

                                        Click to upload advertisement image

                                    </p>



                                    <p class="upload-description mb-0">

                                        PNG, JPG or JPEG • Maximum file size 2MB

                                    </p>



                                </div>





                                <img

                                    src=""

                                    id="ad-img-view"

                                    class="d-none preview-image"

                                    alt="Advertisement Preview">





                                <input

                                    type="file"

                                    name="image"

                                    id="upload-ad-img"

                                    class="d-none"

                                    accept="image/jpeg,image/jpg,image/png">



                            </div>





                            @error('image')



                                <div class="text-danger mt-2 small">



                                    {{ $message }}



                                </div>



                            @enderror



                        </div>



                    </div>



                </div>





                <div class="ad-form-actions">



                    <button

                        type="button"

                        class="btn btn-light"

                        id="cancelAdvertisement">



                        Cancel



                    </button>





                    <button

                        type="submit"

                        id="addAdvertisementBtn"

                        class="btn btn-primary">



                        <i class="fa-solid fa-plus me-2"></i>



                        Add Advertisement



                    </button>



                </div>



            </form>



        </div>



    </div>





    <!-- ADVERTISEMENT LIST -->



    <div class="card advertisement-list-card shadow-sm">



        <div class="card-body p-4">



            <div class="mb-4">



                <h5 class="advertisement-list-title">

                    Advertisement List

                </h5>



                <p class="advertisement-list-subtitle">

                    Manage all advertisements from here.

                </p>



            </div>





            <div class="table-responsive">



                <table

                    id="data-table"

                    class="table nowrap align-middle"

                    style="width:100%">



                    <thead>



                        <tr>



                            <th>SN</th>



                            <th>TITLE NAME</th>



                            <th>CREATED ON</th>



                            <th>PREVIEW</th>



                            <th>STATUS</th>



                            <th>ACTION</th>



                        </tr>



                    </thead>





                    <tbody>



                        @foreach ($advertisement as $advertise)



                            <tr>



                                <td>

                                    {{ $loop->iteration }}

                                </td>





                                <td>



                                    <span class="fw-semibold">



                                        {{ $advertise->title }}



                                    </span>



                                </td>





                                <td>



                                    {{ $advertise->created_at->format('Y-m-d') }}



                                </td>





                                <td>



                                    @if ($advertise->image)



                                        <img
                                            src="{{ $advertise->image }}"
                                            class="advertisement-thumbnail"
                                            alt="{{ $advertise->title }}"
                                            data-image="{{ $advertise->image }}"
                                            data-title="{{ $advertise->title }}"
                                            onclick="openAdvertisementImage(this)"
                                            title="Click to view full image">



                                    @else



                                        <span class="text-muted">

                                            No Image

                                        </span>



                                    @endif



                                </td>





                                <td>



                                    @if ($advertise->is_active == 1)



                                        <span class="status-badge status-active">



                                            Active



                                        </span>



                                    @else



                                        <span class="status-badge status-inactive">



                                            Inactive



                                        </span>



                                    @endif



                                </td>





                                <td>



                                    <div class="d-flex align-items-center gap-2">



                                        <button

                                            type="button"

                                            class="btn action-btn delete-action"

                                            data-bs-toggle="modal"

                                            data-bs-target="#Delete2Modal"

                                            data-user-id="{{ $advertise->id }}"

                                            onclick="setDeleteId(this)"

                                            title="Delete">



                                            <i class="fa-regular fa-trash-can"></i>



                                        </button>





                                        <button

                                            type="button"

                                            class="btn action-btn view-action"

                                            data-bs-toggle="modal"

                                            data-bs-target="#Hide3Modal"

                                            data-user-id="{{ $advertise->id }}"

                                            onclick="setHideId(this)"

                                            title="{{ $advertise->is_active == 1 ? 'Hide' : 'Show' }}">



                                            @if ($advertise->is_active == 0)



                                                <i class="fa-regular fa-eye-slash"></i>



                                            @else



                                                <i class="fa-regular fa-eye"></i>



                                            @endif



                                        </button>



                                    </div>



                                </td>



                            </tr>



                        @endforeach



                    </tbody>



                </table>



            </div>



        </div>



    </div>





    <!-- FULL SIZE ADVERTISEMENT IMAGE MODAL -->
    <div class="modal fade advertisement-image-modal" id="advertisementImageModal" tabindex="-1" aria-labelledby="advertisementImageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="advertisementImageModalLabel">Advertisement Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="advertisementImageLoader" class="ad-image-loading d-none">
                        <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
                    </div>
                    <img src="" id="fullAdvertisementImage" class="full-advertisement-image" alt="Advertisement Preview">
                </div>
            </div>
        </div>
    </div>

    <!-- HIDE / UNHIDE MODAL -->



    <div

        class="modal fade zoom-in"

        id="Hide3Modal"

        tabindex="-1"

        aria-hidden="true">



        <div class="modal-dialog">



            <div class="modal-content">



                <div class="modal-body">



                    <div class="p-3">



                        <div class="text-center">



                            <img

                                class="mb-3"

                                src="{{ asset('/assets') }}/images/icons/hide.svg">



                            <p class="my-4 are-you-sure">

                                Are You Sure?

                            </p>



                            <p class="text-muted my-2 are-you-sure-subtext">



                                Are you sure you want to change this advertisement status?



                            </p>



                        </div>





                        <form

                            action="{{ route('hide_advertisement') }}"

                            method="POST">



                            @csrf



                            <input

                                type="hidden"

                                id="hide_id"

                                name="hide_id">





                            <div class="d-flex align-items-center mt-5 mb-3">



                                <button

                                    type="button"

                                    class="btn btn-light cancel-btn me-3"

                                    data-bs-dismiss="modal">



                                    Cancel



                                </button>





                                <button

                                    type="submit"

                                    id="hideSubmitBtn"

                                    class="btn btn-primary yes-btn">



                                    <i class="fa-regular fa-circle-check me-2"></i>



                                    Yes



                                </button>



                            </div>



                        </form>



                    </div>



                </div>



            </div>



        </div>



    </div>





    <!-- DELETE MODAL -->



    <div

        class="modal fade zoom-in"

        id="Delete2Modal"

        tabindex="-1"

        aria-hidden="true">



        <div class="modal-dialog">



            <div class="modal-content">



                <div class="modal-body">



                    <div class="p-3">



                        <div class="text-center">



                            <img

                                class="mb-3"

                                src="{{ asset('/assets') }}/images/icons/delete-icon.svg">



                            <p class="my-4 are-you-sure">

                                Are You Sure?

                            </p>



                            <p class="text-muted my-2 are-you-sure-subtext">



                                Are you sure you want to delete this advertisement?



                            </p>



                        </div>





                        <form

                            action="{{ route('delete_advertisement') }}"

                            method="POST">



                            @csrf



                            <input

                                type="hidden"

                                id="delete_id"

                                name="delete_id">





                            <div class="d-flex align-items-center mt-5 mb-3">



                                <button

                                    type="button"

                                    class="btn btn-light cancel-btn me-3"

                                    data-bs-dismiss="modal">



                                    Cancel



                                </button>





                                <button

                                    type="submit"

                                    id="deleteSubmitBtn"

                                    class="btn btn-primary yes-btn">



                                    <i class="fa-regular fa-circle-check me-2"></i>



                                    Yes, Delete



                                </button>



                            </div>



                        </form>



                    </div>



                </div>



            </div>



        </div>



    </div>



</div>



@endsection





@section('footer')

<script>

    function openAdvertisementImage(element) {
        const imageUrl = element.getAttribute('data-image');
        const imageTitle = element.getAttribute('data-title');
        const modalElement = document.getElementById('advertisementImageModal');
        const fullImage = document.getElementById('fullAdvertisementImage');
        const modalTitle = document.getElementById('advertisementImageModalLabel');
        const loader = document.getElementById('advertisementImageLoader');

        if (!imageUrl || !modalElement || !fullImage) return;
        if (modalTitle) modalTitle.textContent = imageTitle || 'Advertisement Preview';

        fullImage.classList.add('d-none');
        if (loader) loader.classList.remove('d-none');

        fullImage.onload = function () {
            if (loader) loader.classList.add('d-none');
            fullImage.classList.remove('d-none');
        };

        fullImage.onerror = function () {
            if (loader) loader.classList.add('d-none');
            fullImage.classList.remove('d-none');
        };

        fullImage.src = imageUrl;
        fullImage.alt = imageTitle || 'Advertisement Preview';
        bootstrap.Modal.getOrCreateInstance(modalElement).show();
    }

    document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('advertisementImageModal');
        if (modal) {
            modal.addEventListener('hidden.bs.modal', function () {
                const image = document.getElementById('fullAdvertisementImage');
                const loader = document.getElementById('advertisementImageLoader');
                if (image) {
                    image.src = '';
                    image.classList.remove('d-none');
                }
                if (loader) loader.classList.add('d-none');
            });
        }
    });




    function setHideId(button) {



        document.getElementById('hide_id').value =

            button.getAttribute('data-user-id');



    }





    function setDeleteId(button) {



        document.getElementById('delete_id').value =

            button.getAttribute('data-user-id');



    }





    document.addEventListener('DOMContentLoaded', function () {



        const formCard =

            document.getElementById('advertisementFormCard');



        const openBtn =

            document.getElementById('openAdvertisementForm');



        const closeBtn =

            document.getElementById('closeAdvertisementForm');



        const cancelBtn =

            document.getElementById('cancelAdvertisement');



        const uploadInput =

            document.getElementById('upload-ad-img');



        const imgView =

            document.getElementById('ad-img-view');



        const uploadConditions =

            document.getElementById('ad-upload-conditions');



        const uploadWrapper =

            document.getElementById('ad-upload-wrapper');





        function openAdvertisementForm() {



            formCard.classList.add('show');



            openBtn.classList.add('d-none');



            setTimeout(function () {



                formCard.scrollIntoView({

                    behavior: 'smooth',

                    block: 'start'

                });



            }, 100);



        }





        function closeAdvertisementForm() {



            formCard.classList.remove('show');



            openBtn.classList.remove('d-none');



        }





        openBtn.addEventListener(

            'click',

            openAdvertisementForm

        );





        closeBtn.addEventListener(

            'click',

            closeAdvertisementForm

        );





        cancelBtn.addEventListener(

            'click',

            closeAdvertisementForm

        );





        uploadWrapper.addEventListener(

            'click',

            function () {



                uploadInput.click();



            }

        );





        uploadInput.addEventListener(

            'change',

            function (e) {



                const file = e.target.files[0];



                if (!file) {

                    return;

                }





                const reader = new FileReader();





                reader.onload = function (event) {



                    imgView.src =

                        event.target.result;



                    imgView.classList.remove(

                        'd-none'

                    );



                    uploadConditions.classList.add(

                        'd-none'

                    );



                };





                reader.readAsDataURL(file);



            }

        );





        const addForm =

            document.getElementById(

                'addAdvertisementForm'

            );



        const addBtn =

            document.getElementById(

                'addAdvertisementBtn'

            );





        if (addForm) {



            addForm.addEventListener(

                'submit',

                function () {



                    addBtn.disabled = true;



                    addBtn.innerHTML =

                        '<span class="spinner-border spinner-border-sm me-2"></span>Submitting...';



                }

            );



        }





        const hideForm =

            document.querySelector(

                'form[action="{{ route("hide_advertisement") }}"]'

            );



        const hideBtn =

            document.getElementById(

                'hideSubmitBtn'

            );





        if (hideForm && hideBtn) {



            hideForm.addEventListener(

                'submit',

                function () {



                    hideBtn.disabled = true;



                    hideBtn.innerHTML =

                        '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';



                }

            );



        }





        const deleteForm =

            document.querySelector(

                'form[action="{{ route("delete_advertisement") }}"]'

            );



        const deleteBtn =

            document.getElementById(

                'deleteSubmitBtn'

            );





        if (deleteForm && deleteBtn) {



            deleteForm.addEventListener(

                'submit',

                function () {



                    deleteBtn.disabled = true;



                    deleteBtn.innerHTML =

                        '<span class="spinner-border spinner-border-sm me-2"></span>Deleting...';



                }

            );



        }





        @if ($errors->has('title') || $errors->has('image'))



            openAdvertisementForm();



        @endif



    });



</script>





<script src="https\://code.jquery.com/jquery-3.6.0.min.js"></script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/datatables.init.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/jszip.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js">

</script>



<script

    type="text/javascript"

    src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js">

</script>



@endsection