@extends('seller.layout.index')

@section('title')
    لیست  اقساط
@endsection
@section('style')
    <style>
        .img-thumbnail {
            width: 150px;
            height: auto;
        }

        th {
            vertical-align: middle !important;
        }

        #overlay {
            display: none;
        }

        .sale_img {
            position: absolute;
            width: 40px;
            height: auto;
            left: 0;
            top: 0;
        }

        .text-inherit {
            color: inherit !important;
        }
        @media (min-width: 1400px) {
            .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
                max-width: 1635px !important;
            }
        }
            .status-default{
            color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 10px;
    background-color: #007bff;
    }

        #responseList li{
       margin:10px 0;
    }
    .status-checking{
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 10px;
    background-color: #304153;
    }

    .status-approved{
            color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 10px;
    background-color: green;
    }
    .status-cancelled,.status-rejected{
                    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 10px;
    background-color: red;
    }

        .status-identity-info,.status-self-declaration{
                    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 10px;
    background-color: #ffd105;
    }
    </style>
@endsection

@section('script')
    <script>

        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 confirmCheck(id) {
            let url = "{{route('admin.confirm.check',['id'=>':id'])}}";
            url = url.replace(':id', id);
            $.ajax({
                url: url,
                method: 'GET',
                success: function (response) {

                    swal({
                        text: "چک با موفقیت تایید شد",
                        icon: "success",
                        timer: 2000,
                        buttons: false,
                    })

                },
                error: function (xhr) {
                    alert('خطا در بارگذاری تصویر');
                }
            });
        }
    </script>
@endsection

@section('content')
    <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="row d-lg-flex justify-content-between align-items-end">
        <div class="col-md-8 col-12 d-flex align-items-center">





        </div>

    </div>
    <div class="table-responsive">
        <table class="table table-bordered table-striped text-center">

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

                <th> مبلغ</th>
                <th>وضعیت </th>



            </tr>
            </thead>
            <tbody id="insertRow">


            @foreach ($installments as $key => $installment)

                <tr>
                    <th>
                        {{ 1 + $key }}
                    </th>
                    <th>
                        {{ $installment->due_date }}
                    </th>
                    <th>
                        {{ number_format($installment->amount) }} تومان
                    </th>


                    <th >

                        @if($installment->status != 0)
                            <a onclick="showCheck({{$installment->id}})"
                                                        class="btn btn-info"> نمایش چک آپلودی </a>

                            <a onclick="rejectCheck({{$installment->id}})"
                               class="btn btn-danger">ردکردن چک </a>

 
                        @else

                            <a onclick="uploadCheck({{$installment->id}})"
                                                        class="btn btn-primary">  آپلود چک  </a>
                            <p class="{{$installment->status ? 'btn btn-primary' : 'btn btn-warning'}} mb-0" >  {{ $installment->status ? ' آپلود شده' :' در انتظار آپلود چک ' }}</p>
                        @endif


                    </th>








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


    <div class="row">

        <div class="col-md-12">

            <table class="table table-bordered text-center">

                <tfoot>

                <tr>
                    <th>#</th>

                    <th colspan="3">مجموع:</th>

                    <th>{{ number_format($totalAmount) }} تومان</th>



                </tr>


                </tfoot>

            </table>

        </div>

    </div>

    <div id="overlay">
        <div class="spinner-border text-danger" style="width: 3rem; height: 3rem;"></div>
        <br/>
        Loading...
    </div>
    @include('admin.products.modal')
    @include('admin.products.modal_setting')
    <div id="success_alert">
        <div class="d-flex justify-content-center align-items-center h-100">تغییرات مورد نظر با موفقیت اعمال شد</div>
    </div>
@endsection