@extends('user.layouts')

@section('title', 'Add Advertisement')

@section('header')

<style>
    .advertisement-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 25px;
    }

    .advertisement-page-header h3 {
        margin: 0;
    }

    .back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 9px 18px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 600;
    }

    .advertisement-form-card {
        border: 1px solid #edf0f4 !important;
        border-radius: 15px !important;
        overflow: hidden;
    }

    .advertisement-form-header {
        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;
    }

    .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;
        position: relative;
        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;
    }

    .selected-file-name {
        margin-top: 12px;
        margin-bottom: 0;
        font-size: 12px;
        color: #6b7280;
        text-align: center;
        word-break: break-word;
    }

    .change-image-text {
        margin-top: 10px;
        margin-bottom: 0;
        text-align: center;
        font-size: 12px;
        color: #4f46e5;
        font-weight: 600;
    }

    .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;
    }

    body.dark-mode .advertisement-form-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 .selected-file-name {
        color: #94a3b8;
    }

    body.dark-mode .change-image-text {
        color: #818cf8;
    }

    @media(max-width: 576px) {
        .advertisement-page-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .back-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">

    {{-- PAGE HEADER --}}
    <div class="advertisement-page-header">

        <div>
            <h3 class="page-top-heading">
                Add Advertisement
            </h3>
        </div>

      <button
    type="button"
    class="btn btn-light back-btn"
    onclick="window.location.href='{{ route('advertisement') }}'">

    <i class="fa-solid fa-arrow-left"></i>

    Back

</button>

    </div>


    {{-- ADVERTISEMENT FORM --}}
    <div class="card advertisement-form-card shadow-sm">

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

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

                <h5>
                    Add Advertisement
                </h5>

                <p>
                    Create a new advertisement by entering the details below.
                </p>

            </div>


            <form
                action="{{ route('add_advertisement') }}"
                method="POST"
                enctype="multipart/form-data"
                id="addAdvertisementForm">

                @csrf


                <div class="row">

                    {{-- TITLE --}}
                    <div class="col-lg-12">

                        <div class="mb-4">

                            <label
                                for="advertisementTitle"
                                class="advertisement-label">

                                Advertisement Title

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

                            </label>

                            <input
                                type="text"
                                name="title"
                                id="advertisementTitle"
                                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>


                    {{-- IMAGE --}}
                    <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">

                                {{-- DEFAULT UPLOAD VIEW --}}
                                <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>


                                {{-- IMAGE PREVIEW --}}
                                <div
                                    id="ad-preview-wrapper"
                                    class="d-none">

                                    <img
                                        src=""
                                        id="ad-img-view"
                                        class="preview-image"
                                        alt="Advertisement Preview">

                                    <p
                                        class="selected-file-name"
                                        id="selectedFileName">
                                    </p>

                                    <p class="change-image-text">
                                        Click image area to change image
                                    </p>

                                </div>


                                {{-- FILE INPUT --}}
                                <input
                                    type="file"
                                    name="image"
                                    id="upload-ad-img"
                                    class="d-none"
                                    accept=".jpg,.jpeg,.png,image/jpeg,image/png"
                                    required>

                            </div>


                            @error('image')

                                <div class="text-danger mt-2 small">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                    </div>

                </div>


                {{-- BUTTONS --}}
                <div class="ad-form-actions">

                    <button
                        type="button"
                        class="btn btn-light"
                        id="cancelAdvertisementBtn">

                        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>

</div>

@endsection


@section('footer')

<script>
document.addEventListener('DOMContentLoaded', function () {

    const uploadWrapper =
        document.getElementById('ad-upload-wrapper');

    const uploadInput =
        document.getElementById('upload-ad-img');

    const uploadConditions =
        document.getElementById('ad-upload-conditions');

    const previewWrapper =
        document.getElementById('ad-preview-wrapper');

    const imgView =
        document.getElementById('ad-img-view');

    const selectedFileName =
        document.getElementById('selectedFileName');

    const form =
        document.getElementById('addAdvertisementForm');

    const submitBtn =
        document.getElementById('addAdvertisementBtn');

    const backBtn =
        document.getElementById('backAdvertisementBtn');

    const cancelBtn =
        document.getElementById('cancelAdvertisementBtn');


    /*
    |--------------------------------------------------------------------------
    | BACK BUTTON
    |--------------------------------------------------------------------------
    */

    if (backBtn) {

        backBtn.addEventListener('click', function () {

            window.history.back();

        });

    }


    /*
    |--------------------------------------------------------------------------
    | CANCEL BUTTON - REFRESH PAGE
    |--------------------------------------------------------------------------
    */

    if (cancelBtn) {

        cancelBtn.addEventListener('click', function () {

            window.location.reload();

        });

    }


    /*
    |--------------------------------------------------------------------------
    | OPEN FILE PICKER
    |--------------------------------------------------------------------------
    */

    if (uploadWrapper && uploadInput) {

        uploadWrapper.addEventListener('click', function () {

            uploadInput.click();

        });

    }


    /*
    |--------------------------------------------------------------------------
    | PREVENT INPUT CLICK BUBBLING
    |--------------------------------------------------------------------------
    */

    if (uploadInput) {

        uploadInput.addEventListener('click', function (event) {

            event.stopPropagation();

        });

    }


    /*
    |--------------------------------------------------------------------------
    | IMAGE SELECT + PREVIEW
    |--------------------------------------------------------------------------
    */

    if (uploadInput) {

        uploadInput.addEventListener('change', function (event) {

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

            if (!file) {
                return;
            }


            /*
            |--------------------------------------------------------------------------
            | FILE TYPE CHECK
            |--------------------------------------------------------------------------
            */

            const allowedTypes = [
                'image/jpeg',
                'image/png'
            ];

            if (!allowedTypes.includes(file.type)) {

                alert(
                    'Please select only JPG, JPEG or PNG image.'
                );

                uploadInput.value = '';

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | MAXIMUM 2MB CHECK
            |--------------------------------------------------------------------------
            */

            const maxFileSize =
                2 * 1024 * 1024;

            if (file.size > maxFileSize) {

                alert(
                    'Advertisement image size must be less than 2MB.'
                );

                uploadInput.value = '';

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | IMAGE PREVIEW
            |--------------------------------------------------------------------------
            */

            const reader =
                new FileReader();


            reader.onload = function (e) {

                imgView.src =
                    e.target.result;

                selectedFileName.textContent =
                    file.name;

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

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

            };


            reader.readAsDataURL(file);

        });

    }


    /*
    |--------------------------------------------------------------------------
    | FORM SUBMIT
    |--------------------------------------------------------------------------
    */

    if (form && submitBtn) {

        form.addEventListener('submit', function () {

            if (!form.checkValidity()) {
                return;
            }

            submitBtn.disabled =
                true;

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

        });

    }

});
</script>

@endsection