@extends('admin.layouts.master')
@section('content')
    @include('admin.layouts.breadcrumbs',['contract_id'=>request()->get('contract_id')])
    <section id="basic-horizontal-layouts">
        <div class="row match-height">
            {{--            <livewire:fees.create/>--}}
            <form method="post" action="{{route('admin.fees.store')}}">
                @csrf
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">الأتعاب</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>الاسم</span>
                                            </div>
                                            <div class="col-md-8">
                                                <select class="select2 form-control" name="client_id"
                                                        id="client_id">
                                                    <option value="">اختر واحدا</option>
                                                    @foreach(\App\Client::all() as $client)
                                                        <option
                                                            value="{{$client->id}}" @if(Request::get('client') == $client->id)
                                                            {{'selected'}}
                                                            @elseif(old('client_id') == $client->id)
                                                            {{'selected'}}
                                                            @endif>{{$client->name}}</option>
                                                    @endforeach
                                                </select>
                                                @error('client_id')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>نوع العقد</span>
                                            </div>
                                            <div class="col-md-8">
                                                <select
                                                    class="form-control"
                                                    name="contract_type"
                                                    id="contractType">
                                                    <option value="">اختر واحدا</option>
                                                    <option value="1" {{old('contract_type') == 1 ? 'selected' : ''}}>
                                                        قضية واحدة
                                                    </option>
                                                    <option value="2" {{old('contract_type') == 2 ? 'selected' : ''}}>
                                                        عدة قضايا
                                                    </option>
                                                </select>
                                                @error('contract_type')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6" id="content_case">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>الكود</span>
                                            </div>
                                            <div class="col-md-8">
                                                <select id="case" class="select2 form-control"
                                                        name="case">
                                                    <option value="">اختر واحدا</option>
                                                    @if(Request::get('case'))
                                                        <option
                                                            value="{{Request::get('case')}}"
                                                            selected>{{Request::get('case')}}</option>
                                                    @endif
                                                    @if(!empty($caseCodes))
                                                        @foreach($caseCodes as $caseCode)
                                                            <option
                                                                value="{{$caseCode}}" {{old('case') == $caseCode ? 'selected' : ''}}>{{$caseCode}}</option>
                                                        @endforeach
                                                    @endif
                                                    @if(old('case'))
                                                        <option value="{{old('case')}}"
                                                                selected>{{old('case')}}</option>
                                                    @endif
                                                </select>
                                                @error('case')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6" id="content_cases">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>الأكواد</span>
                                            </div>
                                            <div class="col-md-8">
                                                <select id="cases" class="select2 form-control"
                                                        name="cases[]" multiple="multiple"
                                                        data-placeholder="اختر الأكواد">
                                                    @if(!empty($caseCodes))
                                                        @foreach($caseCodes as $caseCode)
                                                            <option value="{{$caseCode}}"
                                                                    @isset(old('cases')[$loop->index])
                                                                        {{old('cases')[$loop->index] == $caseCode ? 'selected' : ''}}
                                                                    @endisset}>{{$caseCode}}</option>
                                                        @endforeach
                                                    @endif
                                                    @if(old('cases'))
                                                        @foreach(old('cases') as $case)
                                                            <option value="{{$case}}" selected>{{$case}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                @error('cases')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>تاريخ العقد</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="date"
                                                       class="form-control"
                                                       name="contract_date" value="{{old('contract_date')}}">
                                                @error('contract_date')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>إجمالي العقد</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number"
                                                       class="form-control"
                                                       name="total_fee" min="1" value="{{old('total_fee')}}">
                                                @error('total_fee')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>المقدم</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number"
                                                       class="form-control"
                                                       name="down_payment" min="0" value="{{old('down_payment')}}">
                                                <div id="down_payment_alert" class="alert alert-danger mt-1">
                                                    المقدم أكبر من إجمالي العقد
                                                </div>
                                                @error('down_payment')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>اسم العميل</span>
                                            </div>
                                            <div class="col-md-8">
                                                <select class="select2 form-control"
                                                        name="broker">
                                                    <option value="">اختر واحدا</option>
                                                    @foreach(\App\BasicData::where('type', 'broker')->get() as $broker)
                                                        <option
                                                            value="{{$broker->id}}" {{old('broker') == $broker->id ? 'selected' : ''}}>{{$broker->name}}</option>
                                                    @endforeach
                                                </select>
                                                @error('broker')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>نسبة العميل</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number"
                                                       class="form-control"
                                                       name="broker_percentage" min="0"
                                                       value="{{old('broker_percentage')??0}}">
                                                @error('broker_percentage')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>نسبة المكتب</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number"
                                                       class="form-control"
                                                       name="office_percentage" min="0"
                                                       value="{{old('office_percentage')??100}}">
                                                @error('office_percentage')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>مبلغ العميل</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number" readonly class="form-control"
                                                       name="broker_fee" value="{{old('broker_fee')}}">
                                                @error('broker_fee')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>مبلغ المكتب</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number" readonly class="form-control"
                                                       name="office_fee" value="{{old('office_fee')}}">
                                                @error('office_fee')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>نسبة العميل من المقدم</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number" class="form-control" readonly
                                                       name="down_broker_percentage" min="0"
                                                       value="{{old('down_broker_percentage')}}">
                                                @error('down_broker_percentage')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>نسبة المكتب من المقدم</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="number" readonly class="form-control"
                                                       name="down_office_percentage" min="0"
                                                       value="{{old('down_office_percentage')}}">
                                                @error('down_office_percentage')
                                                <div class="alert alert-danger mt-1">
                                                    {{$message}}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <!-- CONTRACTS holder -->
                                    <div id="remain_holder" class="col-12">
                                        <div class="form-group row">
                                            <div class="col-md-2">
                                                <span>دفعة بعد الحكم</span>
                                            </div>
                                            <div class="col-md-10">
                                                <button type="button"
                                                        class="btn btn-outline-success waves-effect waves-light"
                                                        data-toggle="modal"
                                                        data-target="#inlineForm">نعم
                                                </button>
                                                <button type="button"
                                                        class="btn btn-outline-danger waves-effect waves-light"
                                                        id="no_remain">لا
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="remain_message" class="alert alert-success">
                                        تم الإضافة بنجاح
                                    </div>
                                    <div class="col-12 border">
                                        <p class="mt-1">الدفعات</p>
                                        <button class="btn btn-success" type="button" id="add_fee_part">إضافة
                                            دفعة
                                        </button>
                                        <button class="btn btn-danger" type="button" id="remove_fee_part">حذف
                                            واحدة
                                        </button>
                                        @error('fee_parts')
                                            <div class="alert alert-danger text-center mt-2">
                                                {{$message}}
                                            </div>
                                        @enderror
                                        <table id="fee_parts_table"
                                               class="col-12 mb-2 mt-1 table table-hover-animation">
                                            <thead>
                                            <tr>
                                                <th>الدفعات</th>
                                                <th>المبلغ</th>
                                                <th>تاريخ الاستحقاق</th>
                                                <th>نسبة العميل</th>
                                                <th>نسبة المكتب</th>
                                            </tr>
                                            </thead>
                                            <tbody id="fee_parts_holder">
                                            </tbody>
                                        </table>
                                        {{--                                            <div id="total_fee_parts_danger" class="alert alert-danger text-center">--}}
                                        {{--                                                مبلغ إجمالي الدفعات أكبر من إجمالي العقد، الرجاء مراجعة مبلغ الدفعات--}}
                                        {{--                                                وإدخاله مرة أخرى--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div id="total_fee_parts_warning" class="alert alert-warning text-center mt-1 mb-1">--}}
                                        {{--                                                باقي {{($totalFee - array_sum($feePartPaymentFee) - $downPayment)}} من--}}
                                        {{--                                                المبلغ الإجمالي--}}
                                        {{--                                            </div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog"
                     aria-labelledby="myModalLabel33" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel33"></h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label>المتبقي</label>
                                    <input type="number" class="form-control" name="remain_after_judgment" min="0"
                                           value="{{old('remain_after_judgment')}}">
                                    @error('remain_after_judgment')
                                    <div class="alert alert-danger mt-1">
                                        {{$message}}
                                    </div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>العميل</label>
                                    <input type="number" readonly class="form-control"
                                           name="remain_after_judgment_broker"
                                           value="{{old('remain_after_judgment_broker')}}">
                                    @error('remain_after_judgment_broker')
                                    <div class="alert alert-danger mt-1">
                                        {{$message}}
                                    </div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>المكتب</label>
                                    <input type="number" readonly class="form-control"
                                           name="remain_after_judgment_office"
                                           value="{{old('remain_after_judgment_office')}}">
                                    @error('remain_after_judgment_office')
                                    <div class="alert alert-danger mt-1">
                                        {{$message}}
                                    </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button id="add_remain" type="button" class="btn btn-primary waves-effect waves-light"
                                        data-dismiss="modal">
                                    تأكيد
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <button class="btn btn-primary mr-1 mb-1">حفظ</button>
                </div>
            </form>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            var feePartIndex = 1;
            var totalFeePartsArr = [];

            $('#content_case').hide();
            $('#content_cases').hide();
            $('#remove_fee_part').hide();
            $('#remain_message').hide();
            $('#down_payment_alert').hide();
            $('#total_fee_parts_danger').hide();
            $('#total_fee_parts_warning').hide();
            @if(old('contract_type') == 1)
            $('#content_case').show();
            @elseif(old('contract_type') == 2)
            $('#content_cases').show();
            @endif
            $($('#fee_parts_holder')).append('<tr id="fee_part_row_0"><td><input type="text"  class="form-control" name="fee_part_payment_name[0]"></td><td><input type="number" index="0" class="form-control fee_part_payment_fee_input" name="fee_part_payment_fee[0]" min="0"></td><td><input type="date" class="form-control" name="fee_part_payment_date[0]"></td><td><input type="number"  class="form-control" index="0" readonly name="fee_part_payment_broker_fee[0]"></td><td><input type="number"  class="form-control" index="0" readonly name="fee_part_payment_office_fee[0]"></td></tr>');

            $('#contractType').on('change', function () {
                if (this.value == 1) {
                    $('#content_cases').hide();
                    $('#content_case').show();
                }
                if (this.value == 2) {
                    $('#content_cases').show();
                    $('#content_case').hide();
                }
            });
            $('body').on('change', '#client_id', function (e) {
                $('#case').find('option').remove().end().append('<option value="whatever">اختر واحدا</option>');
                $('#cases').find('option').remove().end().append('<option value="">اختر واحدا</option>');
                e.preventDefault();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('get.codes') }}/" + this.value,
                    method: 'get',
                    data: {},
                    success: function (result) {
                        var $caseDropDown = $("#case");
                        $.each(result, function (item) {
                            $caseDropDown.append($("<option />").val(result[item]).text(result[item]));
                        });

                        var $casesDropDown = $("#cases");
                        $.each(result, function (item) {
                            $casesDropDown.append($("<option />").val(result[item]).text(result[item]));
                        });
                    }
                });
            });

            $("input[name=total_fee]").on('change', function () {
                $("input[name=office_percentage]").val(100 - $("input[name=broker_percentage]").val());
                $("input[name=broker_percentage]").val(100 - $("input[name=office_percentage]").val());
                $("input[name=down_broker_percentage]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=down_office_percentage]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=broker_fee]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=office_fee]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=remain_after_judgment_broker]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
                $("input[name=remain_after_judgment_office]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
                if (parseInt($("input[name=total_fee]").val()) < parseInt($("input[name=down_payment]").val())) {
                    $('#down_payment_alert').show();
                } else {
                    $('#down_payment_alert').hide();
                }
            });

            $("input[name=down_payment]").on('change', function () {
                $("input[name=office_percentage]").val(100 - $("input[name=broker_percentage]").val());
                $("input[name=broker_percentage]").val(100 - $("input[name=office_percentage]").val());
                $("input[name=down_broker_percentage]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=down_office_percentage]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=broker_fee]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=office_fee]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=remain_after_judgment_broker]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
                $("input[name=remain_after_judgment_office]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
                if (parseInt($("input[name=total_fee]").val()) < parseInt($("input[name=down_payment]").val())) {
                    $('#down_payment_alert').show();
                } else {
                    $('#down_payment_alert').hide();
                }
            });

            $("input[name=broker_percentage]").on('change', function () {
                $("input[name=office_percentage]").val(100 - $("input[name=broker_percentage]").val());
                $("input[name=broker_percentage]").val(100 - $("input[name=office_percentage]").val());
                $("input[name=down_broker_percentage]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=down_office_percentage]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=broker_fee]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=office_fee]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=remain_after_judgment_broker]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
                $("input[name=remain_after_judgment_office]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
            });

            $("input[name=office_percentage]").on('change', function () {
                $("input[name=office_percentage]").val(100 - $("input[name=broker_percentage]").val());
                $("input[name=broker_percentage]").val(100 - $("input[name=office_percentage]").val());
                $("input[name=down_broker_percentage]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=down_office_percentage]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=down_payment]").val());
                $("input[name=broker_fee]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=office_fee]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=total_fee]").val());
                $("input[name=remain_after_judgment_broker]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
                $("input[name=remain_after_judgment_office]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
            });

            $('body').on('click', '#add_fee_part', function () {
                $($('#fee_parts_holder')).append('<tr id="fee_part_row_' + feePartIndex + '"><td><input type="text"  class="form-control" name="fee_part_payment_name[' + feePartIndex + ']"></td><td><input type="number" index="' + feePartIndex + '"  class="form-control fee_part_payment_fee_input" name="fee_part_payment_fee[' + feePartIndex + ']" min="0"></td><td><input type="date" class="form-control" name="fee_part_payment_date[' + feePartIndex + ']"></td><td><input type="number"  class="form-control" index="' + feePartIndex + '" readonly name="fee_part_payment_broker_fee[' + feePartIndex + ']"></td><td><input type="number"  class="form-control" index="' + feePartIndex + '" readonly name="fee_part_payment_office_fee[' + feePartIndex + ']"></td></tr>');
                feePartIndex++;
                if (feePartIndex > 1) {
                    $('#remove_fee_part').show();
                }
            });

            $('body').on('click', '#remove_fee_part', function () {
                $('#fee_parts_table tr:last').remove();
                feePartIndex--;
                if (feePartIndex == 1) {
                    $('#remove_fee_part').hide();
                }
            });

            $("#fee_parts_table").delegate(".fee_part_payment_fee_input", "change", function () {
                totalFeePartsArr[$(this).attr('index')] = ($("input[name='fee_part_payment_fee[" + $(this).attr('index') + "]']").val());

                // var  totalFeeParts = parseInt(0);
                //
                // for (let i = 0; i < feePartIndex; i++) {
                //     // console.log(totalFeePartsArr[0])
                //     totalFeeParts = parseInt(totalFeeParts)+parseInt(totalFeePartsArr[i]);
                // }
                //
                // console.log(parseInt(totalFeeParts));
                // if (parseInt(totalFeeParts) > $("input[name=total_fee]").val()){
                //     $('#total_fee_parts_danger').show();
                // }else {
                //     $('#total_fee_parts_danger').hide();
                //     $('#total_fee_parts_warning').hide();
                // }
                //
                // if (parseInt(totalFeeParts) < $("input[name=total_fee]").val()){
                //     $('#total_fee_parts_warning').show();
                // }else {
                //     $('#total_fee_parts_danger').hide();
                //     $('#total_fee_parts_warning').hide();
                // }

                $("input[name='fee_part_payment_broker_fee[" + $(this).attr('index') + "]']").val(($("input[name=broker_percentage]").val() / 100) * $("input[name='fee_part_payment_fee[" + $(this).attr('index') + "]']").val());
                $("input[name='fee_part_payment_office_fee[" + $(this).attr('index') + "]']").val(($("input[name=office_percentage]").val() / 100) * $("input[name='fee_part_payment_fee[" + $(this).attr('index') + "]']").val());
            });

            $('#no_remain').on('click', function () {
                $('#remain_holder').remove();
                $('#remain_message').remove();
                $('#inlineForm').remove();
            });

            $("input[name=remain_after_judgment]").on('change', function () {
                $("input[name=remain_after_judgment_broker]").val(($("input[name=broker_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
                $("input[name=remain_after_judgment_office]").val(($("input[name=office_percentage]").val() / 100) * $("input[name=remain_after_judgment]").val());
            });

            $('#add_remain').on('click', function () {
                if (($("input[name=remain_after_judgment_broker]").val() || $("input[name=remain_after_judgment_office]").val()) && $("input[name=remain_after_judgment]").val()) {
                    $('#remain_holder').remove();
                    $('#remain_message').show();
                }
            });

        });
    </script>
@endpush