@extends('Admin.layout')

@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.coupon_offer')  }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Edit Coupons & Offers
        </h5>
    </div>
</div>

<div>
    {{-- FORM --}}
    <form action="{{ route('admin.coupon_offer') }}">


        {{-- ===================================================== --}}
        {{-- PROMOTION INFORMATION --}}
        {{-- ===================================================== --}}

        <div class="card shadow-sm border-0 mb-4">

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

                <h6 class="fw-bold mb-4">
                    Promotion Information
                </h6>

                <div class="row g-4">


                    {{-- PROMOTION TYPE --}}
                    <div class="col-md-6">

                        <label for="promotionType"
                               class="form-label">

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

                        </label>

                        <select name="promotion_type"
                                id="promotionType"
                                class="form-select"
                                required>

                            <option value="coupon" selected>
                                Coupon
                            </option>

                            <option value="offer">
                                Offer
                            </option>

                        </select>

                    </div>


                    {{-- PROMOTION NAME --}}
                    <div class="col-md-6">

                        <label for="promotionName"
                               class="form-label">

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

                        </label>

                        <input type="text"
                               name="name"
                               id="promotionName"
                               class="form-control"
                               value="Welcome Offer"
                               placeholder="Enter promotion name"
                               required>

                    </div>


                    {{-- COUPON CODE --}}
                    <div class="col-md-6"
                         id="couponCodeField">

                        <label for="couponCode"
                               class="form-label">

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

                        </label>

                        <input type="text"
                               name="code"
                               id="couponCode"
                               class="form-control"
                               value="WELCOME10"
                               placeholder="e.g. WELCOME10">

                        <small class="text-muted">
                            Customers will enter this code during checkout.
                        </small>

                    </div>


                    {{-- DISCOUNT TYPE --}}
                    <div class="col-md-6">

                        <label for="discountType"
                               class="form-label">

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

                        </label>

                        <select name="discount_type"
                                id="discountType"
                                class="form-select"
                                required>

                            <option value="percentage" selected>
                                Percentage
                            </option>

                            <option value="fixed">
                                Fixed Amount
                            </option>

                        </select>

                    </div>


                    {{-- DISCOUNT VALUE --}}
                    <div class="col-md-6">

                        <label for="discountValue"
                               class="form-label">

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

                        </label>

                        <input type="number"
                               name="discount_value"
                               id="discountValue"
                               class="form-control"
                               value="10"
                               min="0"
                               required>

                    </div>


                    {{-- MINIMUM ORDER --}}
                    <div class="col-md-6">

                        <label for="minimumOrder"
                               class="form-label">

                            Minimum Order Amount

                        </label>

                        <input type="number"
                               name="minimum_order"
                               id="minimumOrder"
                               class="form-control"
                               value="2000"
                               min="0">

                    </div>


                    {{-- MAXIMUM DISCOUNT --}}
                    <div class="col-md-6">

                        <label for="maximumDiscount"
                               class="form-label">

                            Maximum Discount

                        </label>

                        <input type="number"
                               name="maximum_discount"
                               id="maximumDiscount"
                               class="form-control"
                               value="1000"
                               min="0">

                    </div>


                    {{-- USAGE LIMIT --}}
                    <div class="col-md-6"
                         id="usageLimitField">

                        <label for="usageLimit"
                               class="form-label">

                            Usage Limit

                        </label>

                        <input type="number"
                               name="usage_limit"
                               id="usageLimit"
                               class="form-control"
                               value="100"
                               min="1">

                    </div>

                </div>

            </div>

        </div>



        {{-- ===================================================== --}}
        {{-- APPLICABILITY --}}
        {{-- ===================================================== --}}

        <div class="card shadow-sm border-0 mb-4">

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

                <h6 class="fw-bold mb-4">
                    Applicability
                </h6>

                <div class="row g-4">


                    {{-- APPLICABLE ON --}}
                    <div class="col-md-6">

                        <label for="applicableOn"
                               class="form-label">

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

                        </label>

                        <select name="applicable_on"
                                id="applicableOn"
                                class="form-select"
                                required>

                            <option value="all_products">
                                All Products
                            </option>

                            <option value="category" selected>
                                Category
                            </option>

                            <option value="product">
                                Specific Product
                            </option>

                        </select>

                    </div>


                    {{-- CATEGORY --}}
                    <div class="col-md-6"
                         id="categoryField">

                        <label for="category"
                               class="form-label">

                            Category

                        </label>

                        <select name="category_id"
                                id="category"
                                class="form-select">

                            <option value="">
                                Select Category
                            </option>

                            <option value="1" selected>
                                Rings
                            </option>

                            <option value="2">
                                Necklaces
                            </option>

                            <option value="3">
                                Bracelets
                            </option>

                            <option value="4">
                                Earrings
                            </option>

                        </select>

                    </div>


                    {{-- PRODUCT --}}
                    <div class="col-md-6 d-none"
                         id="productField">

                        <label for="product"
                               class="form-label">

                            Product

                        </label>

                        <select name="product_id"
                                id="product"
                                class="form-select">

                            <option value="">
                                Select Product
                            </option>

                            <option value="1">
                                Diamond Halo Ring
                            </option>

                            <option value="2">
                                Gold Bracelet
                            </option>

                            <option value="3">
                                Gold Chain
                            </option>

                            <option value="4">
                                Diamond Earrings
                            </option>

                        </select>

                    </div>


                    {{-- FIRST ORDER --}}
                    <div class="col-md-6">

                        <label class="form-label d-block">
                            Customer Eligibility
                        </label>

                        <div class="form-check">

                            <input type="checkbox"
                                   name="first_order_only"
                                   value="1"
                                   class="form-check-input"
                                   id="firstOrderOnly"
                                   checked>

                            <label class="form-check-label"
                                   for="firstOrderOnly">

                                First Order Only

                            </label>

                        </div>

                    </div>

                </div>

            </div>

        </div>



        {{-- ===================================================== --}}
        {{-- VALIDITY --}}
        {{-- ===================================================== --}}

        <div class="card shadow-sm border-0 mb-4">

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

                <h6 class="fw-bold mb-4">
                    Validity & Status
                </h6>

                <div class="row g-4">


                    {{-- VALID FROM --}}
                    <div class="col-md-4">

                        <label for="validFrom"
                               class="form-label">

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

                        </label>

                        <input type="date"
                               name="valid_from"
                               id="validFrom"
                               class="form-control"
                               value="2026-08-18"
                               required>

                    </div>


                    {{-- VALID UNTIL --}}
                    <div class="col-md-4">

                        <label for="validUntil"
                               class="form-label">

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

                        </label>

                        <input type="date"
                               name="valid_until"
                               id="validUntil"
                               class="form-control"
                               value="2026-08-31"
                               required>

                    </div>


                    {{-- STATUS --}}
                    <div class="col-md-4">

                        <label for="status"
                               class="form-label">

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

                        </label>

                        <select name="status"
                                id="status"
                                class="form-select">

                            <option value="Active" selected>
                                Active
                            </option>

                            <option value="Inactive">
                                Inactive
                            </option>

                        </select>

                    </div>

                </div>

            </div>

        </div>



        {{-- ===================================================== --}}
        {{-- BUTTONS --}}
        {{-- ===================================================== --}}

        <div class="d-flex justify-content-end gap-2 mb-4">

            <a href="{{ route('admin.coupon_offer') }}"
               class="btn btn-light">

                Cancel

            </a>


            <button type="submit"
                    class="btn btn-primary">

                <i class="fa-solid fa-floppy-disk me-1"></i>

                Update Coupon & Offer

            </button>

        </div>


    </form>

</div>



{{-- ============================================================= --}}
{{-- JAVASCRIPT --}}
{{-- ============================================================= --}}

<script>

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

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

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

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

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

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

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

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


        // PROMOTION TYPE

        function updatePromotionType() {

            if (promotionType.value === 'coupon') {

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

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

                couponCode.required = true;

            } else {

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

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

                couponCode.required = false;

                couponCode.value = '';

            }

        }


        // APPLICABLE ON

        function updateApplicability() {

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

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


            if (applicableOn.value === 'category') {

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

            }


            if (applicableOn.value === 'product') {

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

            }

        }


        promotionType.addEventListener(
            'change',
            updatePromotionType
        );


        applicableOn.addEventListener(
            'change',
            updateApplicability
        );


        updatePromotionType();

        updateApplicability();

    });

</script>

@endsection