@extends('layouts.app')
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                    <!--begin::Page title-->
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                            Add Offer Form</h1>
                        <!--end::Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">Offers</li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">Add Offers</li>

                            <!--end::Item-->
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <!--begin::Form-->
                    <form id="kt_update_offers_form" class="form d-flex flex-column flex-lg-row formSubmit fileUpload"
                        action="{{ route('offer.update-data') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                            <input type="hidden" name="offer_uuid" value="{{ $offer->uuid }}">
                            <!--begin::Tab content-->
                            <div class="tab-content">
                                <!--begin::Tab pane-->
                                <div class="tab-pane fade show active" role="tab-panel">
                                    <div class="d-flex flex-column gap-7 gap-lg-10">
                                        <!--begin::General options-->
                                        <div class="card card-flush py-4">
                                            <div class="card-body pt-0">
                                                <!--begin::Input group-->
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="fs-6 fw-semibold mb-2 required">Upload
                                                            Offer Baner Image</label>
                                                        <br>
                                                        <input id="demo2" class="demo1 imageInput" type="file"
                                                            data_btn_text="Browse" placeholder="drage and drop file here"
                                                            name="offerBanner" />
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <div class='lol'>
                                                            @if ($offer->image != null)
                                                                <img class="imagePreview" src="{{ asset('storage/offer_image/'.$offer->image) }}" alt="Preview"
                                                                id="image_preview"
                                                                style="max-width: 500px; max-height: 200px;">
                                                            @else
                                                                <img class="imagePreview" src="{{ asset('assets/media/auth/no_image.jpg') }}" alt="Preview"
                                                                id="image_preview"
                                                                style="max-width: 500px; max-height: 200px;">
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Start Date</label>
                                                        <input class="form-control form-control-solid"
                                                            placeholder="Start Date" id="kt_datepicker" name="start_date" value="{{ $offer->start_date }}"/>
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Ending Date</label>
                                                        <input class="form-control form-control-solid"
                                                            placeholder="End Date" id="kt_datepicker2" name="end_date" value="{{ $offer->end_date }}"/>
                                                    </div>
                                                </div>
                                                <br>
                                                <label class="required fs-6 fw-semibold mb-2">Products</label>
                                                <br>
                                                <div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
                                                    <div>
                                                        <div class="container product-scroll">
                                                            @forelse ($products as $key => $chunk)
                                                                <div class="row">
                                                                    @forelse ($chunk as $product)
                                                                        <div class="col-md-3 col-sm-6 mt-2">
                                                                            <div class="product-grid">
                                                                                <div class="product-image">
                                                                                    @if ($product->image != null)
                                                                                        <a href="javascript:void(0)"
                                                                                            class="image">
                                                                                            <img class="pic-1"
                                                                                                src="{{ asset('storage/product_images/' . $product->image) }}">
                                                                                        </a>
                                                                                    @else
                                                                                        <a href="javascript:void(0)"
                                                                                            class="image">
                                                                                            <img class="pic-1"
                                                                                                src="{{ asset('assets/media/auth/default_product.png') }}">
                                                                                        </a>
                                                                                    @endif
                                                                                    <div class="overlay">
                                                                                        {{ $product->name }}</div>
                                                                                </div>
                                                                                <div class="product-content">
                                                                                    <label
                                                                                        class="form-check form-switch form-check-custom form-check-solid fs-6 fw-semibold mb-2 map-item">
                                                                                        <input class="form-check-input"
                                                                                            name="map_product[]"
                                                                                            type="checkbox"
                                                                                            value="{{ $product->id }}" {{ in_array($product->id, $offerProduct) ? 'checked' : '' }} />
                                                                                        <span
                                                                                            class="form-check-label fw-semibold text-muted"></span>
                                                                                    </label>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    @empty
                                                                    @endforelse
                                                                </div>
                                                            @empty
                                                                <div class="row text-center">
                                                                    <h3>No Products Found</h3>
                                                                </div>
                                                            @endforelse
                                                            @error('permission')
                                                                <span class="text-danger text-sm">
                                                                    {{ $message }}
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <br>
                            <!--end::Tab content-->
                            <div class="d-flex justify-content-end">
                                <!--begin::Button-->
                                <a href="" id="kt_add_retailer_cancel" class="btn btn-light me-5">Cancel</a>
                                <!--end::Button-->
                                <!--begin::Button-->
                                <button type="submit" class="btn btn-primary">Save Changes
                                    {{-- <span class="indicator-label">Save Changes</span> --}}
                                    {{-- <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span> --}}
                                </button>
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--end::Main column-->
                    </form>
                </div>
                <!--end::Form-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
@endsection
@push('script')
    <script>
        const currentDate = new Date();
        $("#kt_datepicker").flatpickr({
            dateFormat: "Y-m-d",
            minDate: currentDate,
        });
        const startDate = $('#kt_datepicker').val();
        $("#kt_datepicker2").flatpickr({
            dateFormat: "Y-m-d",
            minDate: startDate,
        });
    </script>
    <script>
        (function($) {
            /**
             * Create drag and drop element.
             */
            var customDragandDrop = function(element) {
                $(element).addClass("kwt-file__input");
                var element = $(element).wrap(
                    `<div class="kwt-file"><div class="kwt-file__drop-area"><span class='kwt-file__choose-file ${
            element.attributes.data_btn_text
                ? "" === element.attributes.data_btn_text.textContent
                    ? ""
                    : "kwt-file_btn-text"
                : ""
        }'>${
            element.attributes.data_btn_text
                ? "" === element.attributes.data_btn_text.textContent
                    ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z" /></svg>`
                    : `${element.attributes.data_btn_text.textContent}`
                : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z" /></svg>`
        }</span>${element.outerHTML}</span><span class="kwt-file__msg">${
            "" === element.placeholder ? "or drop files here" : `${element.placeholder}`
        }`
                );
                var element = element.parents(".kwt-file");

                // Add class on focus and drage enter event.
                element.on("dragenter focus click", ".kwt-file__input", function(e) {
                    $(this).parents(".kwt-file__drop-area").addClass("is-active");
                });

                // Remove class on blur and drage leave event.
                element.on("dragleave blur drop", ".kwt-file__input", function(e) {
                    $(this).parents(".kwt-file__drop-area").removeClass("is-active");
                });

                // Show filename when change file.
                element.on("change", ".kwt-file__input", function(e) {
                    let filesCount = $(this)[0].files.length;
                    let textContainer = $(this).next(".kwt-file__msg");
                    if (1 === filesCount) {
                        let fileName = $(this).val().split("\\").pop();
                        textContainer
                            .text(fileName)
                            .next(".kwt-file__delete")
                            .css("display", "block");
                    } else if (filesCount > 1) {
                        textContainer
                            .text(filesCount + " files selected")
                            .next(".kwt-file__delete")
                            .css("display", "inline-block");
                    } else {
                        textContainer.text(
                            `${
                    "" === this[0].placeholder
                        ? "or drop files here"
                        : `${this[0].placeholder}`
                }`
                        );
                        $(this)
                            .parents(".kwt-file")
                            .find(".kwt-file__delete")
                            .css("display", "none");
                    }
                });

                // Delete selected file.
                element.on("click", ".kwt-file__delete", function(e) {
                    let deleteElement = $(this);
                    deleteElement.parents(".kwt-file").find(`.kwt-file__input`).val(null);
                    deleteElement
                        .css("display", "none")
                        .prev(`.kwt-file__msg`)
                        .text(
                            `${
                    "" ===
                    $(this).parents(".kwt-file").find(".kwt-file__input")[0].placeholder
                        ? "or drop files here"
                        : `${
                                                                                                                                                                                                                                                                                                                                                                                                                                $(this).parents(".kwt-file").find(".kwt-file__input")[0].placeholder
                                                                                                                                                                                                                                                                                                                                                                                                                          }`
                }`
                        );
                });
            };

            $.fn.kwtFileUpload = function(e) {
                var _this = $(this);
                $.each(_this, function(index, element) {
                    customDragandDrop(element);
                });
                return this;
            };
        })(jQuery);

        // Plugin initialize
        jQuery(document).ready(function($) {
            $(".demo1").kwtFileUpload();
        });
    </script>
    <script>
        $(document).ready(function() {
            // Function to handle file input change event
            $(".imageInput").change(function() {
                readURL(this);
            });

            // Function to display image preview
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        // Display the image preview
                        $(".imagePreview").attr("src", e.target.result);
                        $(".imagePreview").show();
                    };

                    // Read the selected file as Data URL
                    reader.readAsDataURL(input.files[0]);
                }
            }
        });
    </script>
    <script src="{{ asset('assets/js/offer/med-offer.js') }}"></script>
@endpush