@extends('Partners.Layouts.Page')

@section('styles')
    <link rel="stylesheet" href="{{asset('css/jquery-ui.min.css')}}" />
    <link rel="stylesheet" href="{{asset('css/jquery-ui.multidatespicker.css')}}" />

    <style>
        .swal-notification{
            font-size: 16px;
            font-weight: normal;
            line-height: initial;
            display: block;
            color: #ea5455;
            margin-top: 10px
        }

        .panel-footer {
            padding: 0;
            display: flex;
            border-radius: 0 0 10px 10px;
            overflow: hidden;
        }

        .panel-footer .btn{
            flex: 1;
            padding: 10px;
            border-radius: 0;
        }

        .panel-footer form{
            flex: 1;
        }

        .panel-footer form button{
            width: 100%;
        }

        .form-label{
            font-weight: 400 !important;
            font-size: 85% !important
        }

        .unit-info{
            text-align: right;
        }
    </style>
@endsection

@section('content')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route()}}">الرئيسية /</a></h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">{{$page_title}}</span>
            </div>
        </div>
    </div>

    <!-- Invoice Details -->
    <div class="modal fade" id="invoice-details" tabindex="-1" aria-labelledby="invoice-details-label" aria-hidden="true">
        <div class="modal-dialog"></div>
    </div>

    @include('Messages')

    @include('Partners.Reservations.Invoices.Statics')

    <div class="row row-sm">
        @if($invoices->count() == 0)
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        @include('Partners.Layouts.Empty')
                    </div>
                </div>
            </div>
        @else
            @foreach($invoices as $invoice)
                <div class="col-xs-12 col-sm-6 col-lg-3">
                    <div class="panel price panel-color">

                        <div class="panel-heading bg-{{$invoice->status ? 'success' : 'warning'}} p-0 text-center">
                            <h3 class="m-0">شهر {{month_name($invoice->start_date)}}</h3>
                        </div>

                        <div class="panel-body text-center">
                            <p class="lead"><strong>{{$invoice->unit->code}}</strong></p>

                            @if($invoice->status)
                                <div class="icon-wrapper text-success"><i class="icon fa fa-check-circle"></i> مدفوع </div>
                            @elseif($invoice->total || $invoice->violations)
                                <div class="icon-wrapper text-warning"><i class="icon fa fa-exclamation-circle"></i> بانتظار السداد </div>
                            @else
                                <div class="icon-wrapper text-success"><i class="icon fa fa-check-circle"></i> لا يوجد أي مبلغ لسداده </div>
                            @endif
                        </div>

                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item pt-0 unit-info">
                                <label class="form-label">العقار</label>
                                <h4 class="p-0">{{$invoice?->unit?->type?->name_ar}}: {{$invoice?->unit?->name_ar}}</h4>
                                <h5 class="text-muted">{{$invoice?->unit?->city?->name_ar}}</h5>
                            </li>

                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-md-6 col-xs-12">
                                        <label class="form-label">اجمالي المبيعات</label>
                                        <h6>{{currency($invoice->total) ?? ''}}</h6>
                                    </div>

                                    <div class="col-md-6 col-xs-12">
                                        <label class="form-label">اجمالي العمولات</label>
                                        <h6>{{currency(investor_to_pay($invoice))}}</h6>
                                    </div>

                                    <div class="col-md-6 col-xs-12">
                                        <label class="form-label text-danger">المتنبقي</label>
{{--                                        <h6 class="text-danger">{{currency($invoice->violations) ?? 0}}</h6>--}}
                                        <h6 class="text-danger">0</h6>
                                    </div>
                                </div>
                            </li>

                            @if($invoice->locked_paid != '' && $invoice->status != 1)
                                <li class="list-group-item">
                                    <div class="row row-sm">
                                        <div class="col-md-6 col-xs-12">
                                            <label class="form-label">مدفوع بالرصيد المحجوز</label>
                                            <h6>{{currency($invoice->locked_paid)}}</h6>
                                        </div>

                                        <div class="col-md-6 col-xs-12">
                                            <label class="form-label">المتبقي</label>
                                            <h6>{{currency(investor_to_pay($invoice) - $invoice->locked_paid)}}</h6>
                                        </div>
                                    </div>
                                </li>
                            @endif
                        </ul>

                        <div class="panel-footer text-center">

                            <a data-id="{{$invoice->id}}" class="btn btn-primary button-icon btn-details text-light" data-bs-target="#invoice-details" data-bs-toggle="modal">التفاصيل</a>

                            @if(!$invoice->status && ($invoice->total || $invoice->violations))
                                <form style="display: inline-block;margin: 0" method="post" action="{{partner_route('invoice.pay.mada', base64_encode($invoice->id))}}">
                                    @csrf
                                    <button class="btn btn-success button-icon pay-invoice" data-required="{{currency(investor_to_pay($invoice) - $invoice->locked_paid)}}">الدفع</button>
                                </form>
                            @else
                                <a href="{{partner_route('invoice.pdf', deep_encode($invoice->id, $invoice->created_at))}}" target="_blank" class="btn btn-secondary button-icon">عرض الفاتورة</a>
                            @endif

                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>
@endsection

@section('scripts')
{{--<script>--}}
{{--    $('.pay-invoice').on('click', function (e){--}}
{{--        e.preventDefault();--}}

{{--        const $this = $(this);--}}
{{--        const moneyRequired = $this.data('required');--}}

{{--        let title = 'المبلغ المطلوب';--}}
{{--        title += '<br/>';--}}
{{--        title += '<span class="text text-danger">'+ moneyRequired +'</span>';--}}

{{--        @if(locked_credit() > 0)--}}
{{--            title += '<br/>';--}}
{{--            title += 'باي طريقة تفضل الدفع؟';--}}
{{--            title += '<br/>';--}}

{{--            title += '<span class="swal-notification">';--}}
{{--            title += 'هناك رصيد محجوز بقيمة {{currency(locked_credit())}} اذا اردت استخدامه برجاء الضغط على دفع بالرصيد المحجوز.';--}}
{{--            title += '</span>';--}}
{{--        @endif--}}


{{--        Swal.fire({--}}
{{--            title: title,--}}

{{--            showCancelButton: true,--}}

{{--            @if(locked_credit() > 0)--}}
{{--                showDenyButton: true,--}}
{{--                denyButtonText: 'دفع بالرصيد المحجوز',--}}
{{--            @endif--}}

{{--            confirmButtonText: `دفع عبر مدى`,--}}
{{--            cancelButtonText: `إلغاء`,--}}
{{--        }).then((result) => {--}}
{{--            /* Read more about isConfirmed, isDenied below */--}}
{{--            const invoice = $this.data('code');--}}
{{--                if (result.isDenied) {--}}
{{--                    @if(locked_credit() > 0)--}}
{{--                        $.post('{{partner_route('invoice.pay.credit')}}', {invoice: invoice})--}}
{{--                        .done(function (data){--}}
{{--                            console.log(data);--}}
{{--                            --}}{{--window.location.href = '{{partner_route('invoices.index')}}'--}}
{{--                        })--}}
{{--                        .fail(function (data){--}}
{{--                            Swal.fire(--}}
{{--                                data.responseJSON,--}}
{{--                                '',--}}
{{--                                'error'--}}
{{--                            )--}}
{{--                        })--}}
{{--                    @endif--}}

{{--                } else if (result.isConfirmed) {--}}
{{--                    $this.parents('form').submit();--}}
{{--                }--}}

{{--        })--}}
{{--    })--}}
{{--</script>--}}

    <script>
        const InvoiceDetails = $('#invoice-details');

        $('.btn-details').click(function (){
            let url = '{{partner_route('invoices.show', ':id')}}';
            url = url.replace(':id', $(this).data('id'));

            InvoiceDetails.html(getPreloader())

            $.get(url).done(function (data){
                InvoiceDetails.html(data.data)
            })
        });
    </script>
@endsection