@extends('home.users_profile.layout')



@section('title')
    لیست  اقساط
@endsection

@section('script')
    <script>
function showDemoCheck(id)
{


    let url = "{{route('get.demo.check',['id'=>':id'])}}";
    url = url.replace(':id',id);
    $.ajax({
        url:url ,
        method: 'GET',
        success: function(response) {
            console.log(response);
            $('#img-preview-check').attr('src', response);
            $('.show-modal-img').trigger('click');
            $('#kt_modal_offer_a_deal').modal('show');
        },
        error: function(xhr) {
            alert('خطا در بارگذاری تصویر');
        }
    });
}

function showCheck(id)
{
    let url = "{{route('home.show.check',['id'=>':id'])}}";
    url = url.replace(':id',id);
    $.ajax({
        url:url ,
        method: 'GET',
        success: function(response) {
            console.log(response);
            $('#img-preview-check-show').attr('src', response);
            $('#kt_modal_offer_a_deal_check').modal('show');
        },
        error: function(xhr) {
            alert('خطا در بارگذاری تصویر');
        }
    });
}

function changeUploadId(id){
    $('#installment_id').val(id);
}
    </script>
@endsection


@section('content')


    <div class="modal fade" id="kt_modal_offer_a_deal" tabindex="-1" aria-hidden="true" style="display: none;">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-1000px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header py-7 d-flex justify-content-between">
                    <!--begin::Modal title-->
                    <h2>تصویر نمونه چک </h2>

                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <i class="ki-outline ki-cross fs-1"></i>
                    </div>

                </div>

                <div class="modal-body scroll-y m-5">

                    <div class="stepper stepper-links d-flex flex-column" id="kt_modal_offer_a_deal_stepper" data-kt-stepper="true">
<img id="img-preview-check" class="w-100 h-100">
                    </div>

                </div>

            </div>
        </div>
    </div>
        <div class="modal fade" id="kt_modal_offer_a_deal_check" tabindex="-1" aria-hidden="true" style="display: none;">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-1000px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header py-7 d-flex justify-content-between">
                    <!--begin::Modal title-->
                    <h2>تصویر  چک </h2>

                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <i class="ki-outline ki-cross fs-1"></i>
                    </div>

                </div>

                <div class="modal-body scroll-y m-5">

                    <div class="stepper stepper-links d-flex flex-column" id="kt_modal_offer_a_deal_stepper" data-kt-stepper="true">
<img id="img-preview-check-show" class="w-100 h-100">
                    </div>

                </div>

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

    <div class="modal fade" id="upload_check" tabindex="-1" aria-hidden="true" style="display: none;">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-500px">
            <!--begin::Modal content-->
            <div class="modal-content">


                <div class="modal-body scroll-y m-5">

                    <div class="stepper stepper-links d-flex flex-column" id="kt_modal_offer_a_deal_stepper" data-kt-stepper="true">

                        <form enctype="multipart/form-data" method="post" action="{{route('home.installment.upload.check')}}" class=" w-100   pb-10 fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate" id="kt_modal_create_campaign_stepper_form">
                            @csrf
                            @method('POST')

                            <input name="installment_id" id="installment_id" type="hidden">

                            <!--begin::Step 1-->
                            <div class="current" data-kt-stepper-element="content">
                                <!--begin::Wrapper-->
                                <div class="w-100">
                                    <!--begin::Heading-->
                                    <div class="pb-3 pb-lg-15">
                                        <!--begin::Title-->
                                        <h2 class="fw-bold d-flex align-items-center text-dark">اطلاعات چک خود را دقیق وارد کنید
                                     </h2>

                                    </div>
                                    <!--end::Heading-->
                                    <!--begin::Input group-->


                                    <div class="fv-row mb-3 fv-plugins-icon-container">
                                        <!--begin::Tags-->
                                        <label class="d-block fw-semibold fs-6 mb-5">
                                            <span class="required">تصویر چک </span>
                                            <span class="ms-1" data-bs-toggle="tooltip" aria-label="E.g. انتخاب a logo to represent the company that's running the campaign." data-bs-original-title="E.g. انتخاب a logo to represent the company that's running the campaign." data-kt-initialized="1">
													<i class="ki-outline ki-information-5 text-gray-500 fs-6"></i>
												</span>
                                        </label>
                                        <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>
                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                            <div class="image-input-wrapper w-125px h-125px"></div>
                                            <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="تعویض آواتار" data-bs-original-title="تعویض آواتار" data-kt-initialized="1">
                                                <i class="ki-outline ki-pencil fs-7"></i>
                                                <input type="file" name="file" accept=".png, .jpg, .jpeg">
                                            </label>
                                            <!--end::Tags-->
                                            <!--begin::انصراف-->
                                            <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="انصراف avatar" data-bs-original-title="انصراف avatar" data-kt-initialized="1">
													<i class="ki-outline ki-cross fs-2"></i>
												</span>
                                            <!--end::انصراف-->
                                            <!--begin::حذف-->
                                            <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="حذف آواتار" data-bs-original-title="حذف آواتار" data-kt-initialized="1">
													<i class="ki-outline ki-cross fs-2"></i>
												</span>
                                            <!--end::حذف-->
                                        </div>

                                        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div></div>
                                    <div class="mb-3 fv-row fv-plugins-icon-container">
                                        <!--begin::Tags-->
                                        <label class="required form-label mb-3"> شماره صیادی چک</label>
                                        <!--end::Tags-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-sm form-control-solid" name="number_of_sayyad" placeholder="" value="">
                                        <!--end::Input-->
                                    </div>



                                    <div class="text-left d-flex justify-content-end mt-3">
                                        <button type="submit" class="btn btn-lg btn-primary" >
											<span class="indicator-label">ثبت
											<i class="ki-outline ki-arrow-left fs-3 ms-2 me-0"></i></span>
                                            <span class="indicator-progress">لطفا صبر کنید...
											<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>
                                    </div>


                                </div>
                                <!--end::Wrapper-->
                            </div>

                            <!--begin::Actions-->

                            <!--end::Actions-->
                        </form>


                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">

        <!--begin::Wrapper container-->
        <div class="app-container container-xxl d-flex">

            <!--end::Sidebar-->
            <!--begin::اصلی-->
            <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::Content-->
                    <div id="kt_app_content" class="app-content">
                        <!--begin::محصولات-->
                        <div class="card card-flush">
                            <!--begin::کارت header-->

                            <!--end::کارت header-->
                            <!--begin::کارت body-->
                            <div class="card-body pt-0">
                                <!--begin::Table-->

                                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_ecommerce_sales_table">
                                        <thead>
                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">

                                            <th>#</th>

                                            <th>تاریخ قسط</th>

                                            <th> مبلغ</th>
                                            <th class="text-center">وضعیت </th>


                                            <th class="text-center">عملیات</th>
                                        </tr>
                                        </thead>
                                        <tbody class="fw-semibold text-gray-600">
                                        @foreach ($installments as $key => $installment)
                                            <tr>
                                                <th>
                                                    {{ 1 + $key }}
                                                </th>
                                                <th>
                                                    {{ verta($installment->due_date)->format('Y/m/d') }}
                                                </th>
                                                <th>
                                                    {{ number_format($installment->amount) }} تومان
                                                </th>


                                                <th  class="text-center">
                                                    <p class="{{$installment->status ? 'btn btn-info' : 'btn btn-warning'}}" >  {{ $installment->status ? ' در انتظار تایید' :' در انتظار آپلود چک ' }}</p>

                                                </th>



                                                @if($installment->status == 0)
                                                <td class="text-center">
                                                    <a onclick="showDemoCheck({{$installment->id}})" class="btn btn-info">نمونه چک </a>
                                                    <a  data-bs-toggle="modal" data-bs-target="#upload_check" onclick="changeUploadId({{$installment->id}})" class="btn btn-primary">آپلود چک  </a>
                                                </td>

                                                @else
                                                <td class="text-center">
                                                    <a onclick="showCheck({{$installment->id}})" class="btn btn-info">  نمایش چک آپلودی </a>
                                                </td>
                                                @endif











                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>


                                <!--end::Table-->
                            </div>
                            <!--end::کارت body-->
                        </div>
                        <!--end::محصولات-->
                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Content wrapper-->
                <!--begin::Footer-->

                <!--end::Footer-->
            </div>
            <!--end:::اصلی-->
        </div>
        <!--end::Wrapper container-->
    </div>

@endsection