@extends('layouts.app')

   {{-- Important Variables --}}

   
   @section('title')
       {{ $moduleName }}->{{ $createItemName }}
   @stop

   @section('top-bar')
       @include('includes.top-bar')
   @stop
   @section('left-sidebar')
       @include('includes.left-sidebar')
   @stop
   @section('content')


       <section class="content">
           <div class="container-fluid">
               <div class="block-header pull-right">
                   <a class="btn btn-sm btn-info waves-effect" href="{{ url()->previous() }}">{{ __('lang.back') }}</a>
               </div>
               <ol class="breadcrumb breadcrumb-col-cyan pull-left">
                   <li><a href=""><i class="material-icons">home</i> {{ __('lang.home') }}</a></li>
                   <li><a href="{{ route('sell') }}"> <i class="fas fa-dolly"></i> Sale</a></li>
                   <li><a href="{{ route('schedule_manage', ['sell_id' => $sells->id]) }}"><i
                               class="material-icons">schedule</i>Schedule Manage</a></li>
                    <li><a href="{{ route('receivable_schedule.manage_surcharge', ['id' => $sells->id]) }}"><i
                                class="material-icons">schedule</i>Manage Surcharge</a></li>
                   <li class="active"><i class="material-icons">{{ $breadcrumbCurrentIcon }}</i>
                       {{ $breadcrumbCurrentName }}</li>
               </ol>

               <!-- Inline Layout | With Floating Label -->
               <form class="form" id="form_validation" method="post" enctype="multipart/form-data"
                   action="{{ $parentRoute }}">
                   @csrf
               <div class="row clearfix">
                   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                       <div class="card">
                           <div class="header">
                               <h2>
                                   {{ $createItemName }}
                                   <span style="float: right">
                                       {{ App\Models\Sell::find($item->sells_id)->customer->name }}
                                   </span>
                               </h2>
                               <br>
                               
                               <div class="body">
                                       <div class="row">
                                           <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                               <input type="hidden" name="sells_id" value="{{ $sells_id ?? ''}}" />
                                               @if($action == 'edit')
                                                @include('admin.partials.bank',[
                                                    'data'=>[
                                                        'made_of_payment'   =>$items->mode_of_payment,
                                                        'bank_id'           =>$items->head_id,
                                                    ]]) 
                                                @else
                                                    @include('admin.partials.bank')
                                                @endif
                                               <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 field_area">
                                                   <div class="form-group form-float">
                                                       <div class="form-line focused" id="bs_datepicker_container">
                                                           <input autocomplete="off"
                                                               value=""
                                                               name="date_of_collection" type="text" readonly="true"
                                                               placeholder="Date of Collection"
                                                               class="form-control disable">
                                                       </div>
                                                   </div>
                                               </div>

                                               <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 instruments_no">
                                                <div class="form-group form-float">
                                                    <div class="form-line focused">

                                                        <input value="{{ old('instrument_no') }}"
                                                            id="reference_input" name="instrument_no" type="text"
                                                            class="form-control show">
                                                        <label class="form-label" id="instrument_no">Instrument
                                                            No.</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 instruments_date hide">
                                                <div class="form-group form-float">
                                                    <div class="form-line focused" id="bs_datepicker_container_1">

                                                        <input value="{{ old('instrument_date') }}"
                                                            id="reference_input" name="instrument_date" type="text"
                                                            class="form-control show">
                                                        <label class="form-label" id="instrument_no">Instrument
                                                            Date</label>
                                                    </div>
                                                </div>
                                            </div>

                                               <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="reference_no1">
                                                   <div class="form-group form-float">
                                                       <div class="form-line focused">

                                                           <input value="{{ old('reference_no') }}"
                                                               id="reference_input" name="reference_no" type="text"
                                                               class="form-control show reference_number">
                                                           <label class="form-label" id="reference_no1">Reference
                                                               No.</label>
                                                       </div>
                                                   </div>
                                               </div>
                                               <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="particulars">
                                                   <div class="form-group form-float">
                                                       <div class="form-line focused">
                                                           <input value="{{ old('particulars') }}"
                                                               name="particulars" id="particulars" type="text"
                                                               class="form-control show">
                                                           <label class="form-label" id="particulars">Particulars</label>
                                                       </div>
                                                   </div>
                                               </div>
                                           </div>

                                       </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <!-- #END# Inline Layout | With Floating Label -->
               </div>


               <div class="card">
                   <div class="header">
                       <h2>Payment Details</h2>
                   </div>
                   <br>
                   <div id="items_surchages" class="body">
                       {{-- row start --}}
                       {{-- @foreach ($items as $item) --}}

                       <div id="surcharge">

                       </div>

                       {{-- @endforeach --}}

                       <div class="row">
                           <div class="right col-lg-4 col-md-4 col-sm-4 col-xs-12">
                               <div class="form-group form-float">
                                   <div style="display: flex">
                                       <label class="form-label" id="total_amount_label">Total Amount: </label>
                                       <p id="total_amount"> </p>
                                   </div>
                                   <input readonly value="{{ $items[0]->total_sucrharge_amount }}" name="actual_amount"
                                       id="actual_amount" type="hidden" class="form-control">
                                   <input readonly value="" name="calculation_" id="calculation_amount"
                                       type="hidden" class="form-control">
                               </div>
                           </div>
                       </div>
                       <div class="row">

                           <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                               <div class="form-line">
                                   @if ($action == 'edit')
                                       <button type="submit" id="form_button"
                                           class="btn btn-warning m-t-15 waves-effect">
                                           Update
                                       </button>
                                   @else
                                       <button type="submit" id="form_button"
                                           class="btn btn-primary m-t-15 waves-effect">
                                           SAVE
                                       </button>
                                   @endif
                                   <a class="btn m-t-15 btn-default waves-effect"
                                       href="{{ url()->previous() }}">{{ __('lang.back') }}</a>
                               </div>
                           </div>
                       </div>
                       {{-- row end --}}
                       <hr>
                       </form>
                   </div>
               </div>
            </form>
       </section>
   @stop

   @push('include-css')
       <!-- Colorpicker Css -->
       <link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />

       <!-- Dropzone Css -->
       <link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">

       <!-- Multi Select Css -->
       <link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">

       <!-- Bootstrap Spinner Css -->
       <link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">

       <!-- Bootstrap Tagsinput Css -->
       <link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">

       <!-- Bootstrap Select Css -->
       <link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" />



       <!-- Bootstrap Material Datetime Picker Css -->
       <link
           href="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') }}"
           rel="stylesheet" />

       <!-- Bootstrap DatePicker Css -->
       <link href="{{ loadAsset('asset/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />


       <!-- noUISlider Css -->
       <link href="{{ loadAsset('asset/plugins/nouislider/nouislider.min.css') }}" rel="stylesheet" />

       <!-- Sweet Alert Css -->
       <link href="{{ loadAsset('asset/plugins/sweetalert/sweetalert.css') }}" rel="stylesheet" />
   @endpush

   @push('include-js')
       <!-- Moment Plugin Js -->
       <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

       <!-- Bootstrap Material Datetime Picker Plugin Js -->
       <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}">
       </script>

       <!-- Bootstrap Datepicker Plugin Js -->
       <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>

       <!-- Sweet Alert Plugin Js -->
       <script src="{{ loadAsset('asset/plugins/sweetalert/sweetalert.min.js') }}"></script>

       <!-- Autosize Plugin Js -->
       <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

       <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>

       <script>
           let head_url = "{{ route('actual_received.mode.change') }}";
           let bank_id = "{{ $surcharge->head_id ?? 0 }}";
           
        //    let actual_received_item = 0;
           let surcharge = 0;
           action = "{{ $action }}";
       </script>

       <script src="{{ loadAsset('asset/js/custom/multi-surcharge.js') }}"></script>
       <script>
          
           @if (Session::has('success'))
               toastr["success"]('{{ Session::get('success') }}');
           @endif
           @if (Session::has('error'))
               toastr["error"]('{{ Session::get('error') }}');
           @endif
           @if ($errors->any())
               @foreach ($errors->all() as $error)
                   toastr["error"]('{{ $error }}');
               @endforeach
           @endif
           if (action == 'show') {
               $('.show').attr('readonly', true);
               $('.disable').attr('disabled', true);
           }
       </script>
   @endpush