@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">
                            Edit Retailer 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"><a href="Javascript:void(0)"
                                    class="text-muted text-hover-primary">Retailers</a></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">Edit Retailer</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_retailer_form" class="form d-flex flex-column flex-lg-row"
                        data-action="{{ route('retailer.update-data') }}">
                        @csrf
                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                            <!--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-->
                                                <input type="hidden" class="form-control" name="retailer_uuid"
                                                    value="{{ $retailer->uuid }}">
                                                <div class="row">
                                                    <div class="col-md-10">
                                                        <div class="row">
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">First Name</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="first_name"
                                                                    class="form-control mb-2" placeholder="Enter First Name"
                                                                    value="{{ $retailer->first_name }}">
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Last Name</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="last_name"
                                                                    class="form-control mb-2" placeholder="Enter Last Name"
                                                                    value="{{ $retailer->last_name }}">
                                                                <!--end::Input-->
                                                            </div>
                                                        </div>
                                                        <br>
                                                        <div class="row">
                                                            <div class="col-md-12 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Company Name</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="company_name"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Company Name"
                                                                    value="{{ $retailer->company_name }}">
                                                                <!--end::Input-->
                                                                <!--begin::Description-->
                                                                <div class="text-muted fs-7">A Company Name is required and
                                                                    recommended
                                                                    to be unique.</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span class="required">Image</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" aria-label="Select a user image."
                                                                data-bs-original-title="Select a user image."
                                                                data-kt-initialized="1"></i>
                                                        </label>
                                                        <!--end::Label-->
                                                        <!--begin::Image input placeholder-->
                                                        <style>
                                                            .image-input-placeholder {
                                                                background-image: url('assets/media/svg/files/blank-image.svg');
                                                            }

                                                            [data-bs-theme="dark"] .image-input-placeholder {
                                                                background-image: url('assets/media/svg/files/blank-image-dark.svg');
                                                            }
                                                        </style>
                                                        <!--end::Image input placeholder-->
                                                        <!--begin::Image input-->
                                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                                            data-kt-image-input="true">
                                                            <!--begin::Preview existing avatar-->
                                                            <div class="image-input-wrapper w-150px h-150px"
                                                                style="background-image: url('{{ asset('storage/user_image/' . $retailer->image) }}');">
                                                            </div>
                                                            <!--end::Preview existing avatar-->
                                                            <!--begin::Label-->
                                                            <label
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                                aria-label="Change avatar"
                                                                data-bs-original-title="Change avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                                <!--begin::Inputs-->
                                                                <input type="file" name="logo"
                                                                    accept=".png, .jpg, .jpeg">
                                                                <input type="hidden" name="avatar_remove">
                                                                <!--end::Inputs-->
                                                            </label>
                                                            <!--end::Label-->
                                                            <!--begin::Cancel-->
                                                            <span
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                                                aria-label="Cancel avatar"
                                                                data-bs-original-title="Cancel avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                            <!--end::Cancel-->
                                                            <!--begin::Remove-->
                                                            <span
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                                                aria-label="Remove avatar"
                                                                data-bs-original-title="Remove avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                            <!--end::Remove-->
                                                        </div>
                                                        <!--end::Image input-->
                                                        <!--begin::Hint-->
                                                        <div class="form-text" style="font-size: 10px;">Allowed file
                                                            types:
                                                            png, jpg, jpeg.</div>
                                                        <!--end::Hint-->
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="row">
                                                            <div class="col-md-4 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Retailer Type</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select name="retailer_type_id" data-control="select2"
                                                                    class="form-select form-select-solid"
                                                                    data-hide-search="true">
                                                                    <option value="">Select Retailer Type</option>
                                                                    @foreach ($retailer_types as $type)
                                                                        <option
                                                                            value="{{ $type->id }}"{{ $retailer->retailer_type_id == $type->id ? 'selected' : '' }}>
                                                                            {{ $type->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-4 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required fs-6 fw-semibold mb-2">Email</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="email"
                                                                    class="form-control mb-2" placeholder="Enter Email Id"
                                                                    value="{{ $retailer->email }}">
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-4 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required fs-6 fw-semibold mb-2">Phone</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="phone"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter phone No." maxlength="10"
                                                                    value="{{ $retailer->phone }}"
                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                                <!--end::Input-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Enter Address</label>
                                                        <textarea type="text" name="address" class="form-control mb-2" placeholder="Enter address">{{ $retailer->address?->address ?? '' }}</textarea>
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Enter Pin
                                                            Code</label>
                                                        <input type="text" name="pin_code" class="form-control mb-2"
                                                            placeholder="Enter pin code." maxlength="6"
                                                            value="{{ $retailer->address?->pin_code ?? '' }}"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">License No.</label>
                                                        <input type="text" name="license_no" class="form-control mb-2"
                                                            value="{{ $retailer->document?->license_no }}"
                                                            placeholder="Enter License no.">
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">License Expiery
                                                            Date</label>
                                                        <input class="form-control form-control-solid"
                                                            placeholder="Expiery Date" id="kt_datepicker"
                                                            name="license_expiery_date"
                                                            value="{{ $retailer->document?->license_expiery_date }}" />
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">GST No.</label>
                                                        <input type="text" name="gst_no" class="form-control mb-2"
                                                            placeholder="Enter GST no."
                                                            value="{{ $retailer->document?->gst_no }}">
                                                    </div>
                                                </div>
                                                <br>
                                                {{-- <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Upload
                                                            License Cartificate</label>
                                                        <br>
                                                        <input id="demo2" class="demo1" type="file"
                                                            data_btn_text="Browse" placeholder="drage and drop file here"
                                                            name="license_certificate" />
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Upload
                                                            GST Cartificate</label>
                                                        <br>
                                                        <input id="demo2" class="demo1" type="file"
                                                            data_btn_text="Browse" placeholder="drage and drop file here"
                                                            name="gst_certificate" />
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Upload
                                                            Stock Report</label>
                                                        <br>
                                                        <input id="demo2" class="demo1" type="file"
                                                            data_btn_text="Browse" placeholder="drage and drop file here"
                                                            name="stock_report" />
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Upload
                                                            Past Invoice</label>
                                                        <br>
                                                        <input id="demo2" class="demo1" type="file"
                                                            data_btn_text="Browse" placeholder="drage and drop file here"
                                                            name="past_invoice_report" />
                                                    </div>
                                                </div> --}}

                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <br>
                            <!--end::Tab content-->
                            <div class="d-flex justify-content-end">
                                <!--begin::Button-->
                                <a href="" id="kt_update_retailer_cancel" class="btn btn-light me-5">Cancel</a>
                                <!--end::Button-->
                                <!--begin::Button-->
                                <button type="submit" id="kt_update_retailer_submit" class="btn btn-primary">
                                    <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,
        });
    </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}`
        }</span><div class="kwt-file__delete"></div></div></div>`
                );
                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 src="{{ asset('assets/js/retailer/update.js') }}"></script>
@endpush