@extends('layouts.app')
@section('content')
    <!--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">Retailer
                        Document
                    </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">Document</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
            </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::Row-->
                <div class="equalHMVWrap eqWrap">
                    @if ($documents->license_certificate != null)
                        <a class="link-download" href="{{ url('retailer/download-retailer-document/' . $documents->license_certificate) }}">
                            <div class="equalHMV eq">
                                <p class="document_title">License Certificate</p>
                                <div class="modify-button">
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor edit-licence-certificate"
                                        data-value="license">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor"
                                        id="delete-license-certificate" data-value="license"
                                        data-user-id="{{ $documents->user_id }}">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </a>
                    @endif
                    @if ($documents->gst_certificate != null)
                        <a href="{{ url('retailer/download-retailer-document/' . $documents->gst_certificate) }}">
                            <div class="equalHMV eq">
                                <p class="document_title">GST Certificate</p>
                                <div class="modify-button">
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor edit-gst-certificate"
                                        data-value="gst">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor" id="delete-gst-certificate"
                                        data-value="gst" data-user-id="{{ $documents->user_id }}">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </a>
                    @endif
                    @if ($documents->stock_report != null)
                        <a href="{{ url('retailer/download-retailer-document/' . $documents->stock_report) }}">
                            <div class="equalHMV eq">
                                <p class="document_title">Stock Report</p>
                                <div class="modify-button">
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor edit-stock-report"
                                        data-value="stock">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor" id="delete-stock-report"
                                        data-value="stock_report" data-user-id="{{ $documents->user_id }}">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </a>
                    @endif
                    @if ($documents->past_invoice_report != null)
                        <a href="{{ url('retailer/download-retailer-document/' . $documents->past_invoice_report) }}">
                            <div class="equalHMV eq">
                                <p class="document_title">Past Invoice Report</p>
                                <div class="modify-button">
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor edit-past-invoice-report"
                                        data-value="past">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="banner_btn_style_anchor"
                                        id="delete-past-invoice-report" data-value="past_invoice_report"
                                        data-user-id="{{ $documents->user_id }}">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </a>
                    @endif
                </div>
                {{-- <div class="banner_btn_main_div_style"> --}}
                {{-- @if ($documents->license_certificate != null)
                        <div class="banner_btn_main_style">
                            <p>
                                License Certificate
                            </p>
                            <div class="banner_btn_style">
                                <p>
                                    {{ $documents->license_certificate }}
                                </p>
                                <!--begin::Card footer-->
                            </div>

                        </div>
                        <div class="banner_btn_style_1">
                            <a href="javascript:void(0)" class="banner_btn_style_anchor edit-licence-certificate"
                                data-value="license">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                            <a href="javascript:void(0)" class="banner_btn_style_anchor"
                                id="delete-license-certificate" data-value="license"
                                data-user-id="{{ $documents->user_id }}">
                                <i class="fa-solid fa-trash"></i>
                            </a>
                        </div>
                    @endif --}}
                {{-- @if ($documents->gst_certificate != null)
                        <div class="col-md-4 banner_btn_style">
                            <img src="{{ asset('storage/user_documents/' . $documents->gst_certificate) }}" alt=""
                                width="100%">
                            <!--begin::Card footer-->
                            <div class="banner_btn_style_1">
                                <a href="javascript:void(0)" class="banner_btn_style_anchor edit-gst-certificate"
                                    data-value="gst">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>
                                <a href="javascript:void(0)" class="banner_btn_style_anchor" id="delete-gst-certificate"
                                    data-value="gst" data-user-id="{{ $documents->user_id }}">
                                    <i class="fa-solid fa-trash"></i>
                                </a>
                            </div>
                            <!--begin::Add new card-->
                        </div>
                    @endif --}}
                {{-- @if ($documents->stock_report != null)
                        <div class="col-md-4 banner_btn_style">
                            <img src="{{ asset('storage/user_documents/' . $documents->stock_report) }}" alt=""
                                width="100%">
                            <!--begin::Card footer-->
                            <div class="banner_btn_style_1">
                                <a href="javascript:void(0)" class="banner_btn_style_anchor edit-stock-report"
                                    data-value="stock">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>
                                <a href="javascript:void(0)" class="banner_btn_style_anchor" id="delete-stock-report"
                                    data-value="stock_report" data-user-id="{{ $documents->user_id }}">
                                    <i class="fa-solid fa-trash"></i>
                                </a>
                            </div>
                        </div>
                    @endif --}}
                {{-- @if ($documents->past_invoice_report != null)
                        <div class="col-md-4 banner_btn_style">
                            <img src="{{ asset('storage/user_documents/' . $documents->past_invoice_report) }}"
                                alt="" width="100%">
                            <!--begin::Card footer-->
                            <div class="banner_btn_style_1">
                                <a href="javascript:void(0)" class="banner_btn_style_anchor edit-past-invoice-report"
                                    data-value="past">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>
                                <a href="javascript:void(0)" class="banner_btn_style_anchor" id="delete-past-invoice-report"
                                    data-value="past_invoice_report" data-user-id="{{ $documents->user_id }}">
                                    <i class="fa-solid fa-trash"></i>
                                </a>
                            </div>
                        </div>
                    @endif --}}
                <!--end::Row-->
                <!--begin::Modals-->
                <!--begin::Modal - Add role-->
                <div class="modal fade" id="kt_modal_update_license_certificate" tabindex="-1" aria-hidden="true">
                    <!--begin::Modal dialog-->
                    <div class="modal-dialog modal-dialog-centered mw-650px">
                        <!--begin::Modal content-->
                        <div class="modal-content">
                            <!--begin::Modal header-->
                            <div class="modal-header">
                                <!--begin::Modal title-->
                                <h2 class="fw-bold show-heading"></h2>
                                <!--end::Modal title-->
                                <!--begin::Close-->
                                <div class="btn btn-icon btn-sm btn-active-icon-primary"
                                    data-kt-pilldrop-modal-action="close">
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                    <span class="svg-icon svg-icon-1">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                                rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                            <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                                transform="rotate(45 7.41422 6)" fill="currentColor" />
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                                <!--end::Close-->
                            </div>
                            <!--end::Modal header-->
                            <!--begin::Modal body-->
                            <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                                <!--begin::Form-->
                                <form id="kt_modal_update_license_certificate_form" class="form"
                                    data-action="{{ route('update-document') }}">
                                    <input type="hidden" id="user_id" name="user_id"
                                        value="{{ $documents->user_id }}">
                                    <input type="hidden" name="document_type" id="document_type">
                                    <label class="required fs-6 fw-semibold mb-2 show-label"></label>
                                    <br>
                                    <input id="demo2" class="demo1" type="file" data_btn_text="Browse"
                                        placeholder="drage and drop file here" name="" />
                                    <div class="text-center pt-15">
                                        <button type="reset" class="btn btn-light me-3"
                                            data-kt-pilldrop-modal-action="cancel">Discard</button>
                                        <button type="submit" class="btn btn-primary"
                                            data-kt-pilldrop-modal-action="submit">
                                            <span class="indicator-label">Submit</span>
                                            <span class="indicator-progress">Please wait...
                                                <span
                                                    class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>
                                    </div>
                                    <!--end::Actions-->
                                </form>
                                <!--end::Form-->
                            </div>
                            <!--end::Modal body-->
                        </div>
                        <!--end::Modal content-->
                    </div>
                    <!--end::Modal dialog-->
                </div>
                <!--end::Modal - Add role-->
                <!--end::Modals-->
                {{-- </div> --}}
                <div class="banner_btn_style_12">
                    <i class="fa-solid fa-pen-to-square"></i>
                </div>
                <!--end::Content container-->
            </div>
            <!--end::Content-->
        </div>
    </div>
    <!--end::Content wrapper-->
@endsection
@push('script')
    <script>
        const base_url = "{{ url('/') }}";
    </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>
        $(document).on('click', '#delete-license-certificate', function() {
            let userId = $(this).attr('data-user-id');
            let doc = $(this).attr('data-value');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            })
            $.ajax({
                type: "post",
                url: base_url + "/delete-user-document",
                data: {
                    user_id: userId,
                    doc: doc
                },
                success: function(response) {
                    if (response.status == true) {
                        showToast('success', 'PILLDROP', response.message);
                        location.reload();
                    } else {
                        showToast('error', 'PILLDROP', response.message);
                    }
                }
            });
        })
        $(document).on('click', '#delete-gst-certificate', function() {
            let userId = $(this).attr('data-user-id');
            let doc = $(this).attr('data-value');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            })
            $.ajax({
                type: "post",
                url: base_url + "/delete-user-document",
                data: {
                    user_id: userId,
                    doc: doc
                },
                success: function(response) {
                    if (response.status == true) {
                        showToast('success', 'PILLDROP', response.message);
                        location.reload();
                    } else {
                        showToast('error', 'PILLDROP', response.message);
                    }
                }
            });
        })
        $(document).on('click', '#delete-past-invoice-report', function() {
            let userId = $(this).attr('data-user-id');
            let doc = $(this).attr('data-value');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            })
            $.ajax({
                type: "post",
                url: base_url + "/delete-user-document",
                data: {
                    user_id: userId,
                    doc: doc
                },
                success: function(response) {
                    if (response.status == true) {
                        showToast('success', 'PILLDROP', response.message);
                        location.reload();
                    } else {
                        showToast('error', 'PILLDROP', response.message);
                    }
                }
            });
        })
        $(document).on('click', '#delete-stock-report', function() {
            let userId = $(this).attr('data-user-id');
            let doc = $(this).attr('data-value');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            })
            $.ajax({
                type: "post",
                url: base_url + "/delete-user-document",
                data: {
                    user_id: userId,
                    doc: doc
                },
                success: function(response) {
                    if (response.status == true) {
                        showToast('success', 'PILLDROP', response.message);
                        location.reload();
                    } else {
                        showToast('error', 'PILLDROP', response.message);
                    }
                }
            });
        })
    </script>
    <script src="{{ asset('assets/js/document-modify.js') }}"></script>
@endpush