@extends('layouts.master')

@section('title', 'Agro Pro - Lend Equipment')

@section('content')
    <div id="page">
        <div class="card cardi card-style" style="position: fixed !important; top: 50px; left: 0; right: 0; z-index: 50;margin: 0px 0px 0px 0px; border-radius: 0px;backdrop-filter: saturate(180%) blur(20px);">
            <div class="content" style="margin-top:5px;">
                <h5 id="filtered_date" class="text-left mb-0"style="margin-top:15px">{{ \Carbon\Carbon::parse ($db_current_date)->isoFormat('ddd, Do MMMM, YYYY')}}</h5>
                <div class="row" style="margin-bottom: 0px; margin-top: 0px; !important;">
                    <div class="col-7 text-center">
                        <a data-menu="lendEquipment" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s"><i class="fa fa-hands-helping"></i>  LEND EQUIPMENT</a>
                    </div>
                    <div class="col-5 text-center">
                        <a data-menu="changeDate" href="#" class="btn btn-full gradient-orange font-13 btn-m font-600 mt-3 rounded-s"><i class="fa fa-filter"></i>  FILTER</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="header header-auto-sho header-fixed header-logo-center">
            <a href="#" class="header-title">Lend Equipment</a>
            <a href="#" data-back-button class="header-icon header-icon-1"><i class="fas fa-chevron-left"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-dark"><i class="fas fa-sun"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-light"><i class="fas fa-moon"></i></a>
            <a href="#" data-menu="menu-main" class="header-icon header-icon-4"><i class="fas fa-bars"></i></a>
        </div>
        <div class="page-title-clear"></div>
        <div class="page-content">

            <div class="card card-style mb-3 rounded-s" style="margin-top: 90px;">
            </div>
            <div class="job-content">
                @foreach($lentEquipmentGroups as $lentEquipmentGroup)

                    @php $returned_count = ''; $equipment_name = DB::table('equipment_lists')->where('id', $lentEquipmentGroup->equipment_list_id)->value('equipment_name'); $job_log_id = DB::table('equipment_transitions')->where('id', $lentEquipmentGroup->id)->value('job_log_id'); $job_date = DB::table('job_log')->where('id', $job_log_id)->value('job_date'); $equipment_ids = DB::table('equipment_transitions')->where('id', $lentEquipmentGroup->id)->value('equipment_ids'); $count = count(json_decode($equipment_ids)); $returned_equipment_ids = DB::table('equipment_transitions')->where('id', $lentEquipmentGroup->id)->value('returned_equipment_ids'); if($returned_equipment_ids !== null) { $returned_count = count(json_decode($returned_equipment_ids));} else { $returned_count === 0; }@endphp

                    <div class="card card-style mb-3 rounded-s">
                        <div class="list-group list-custom-small list-icon-0 @if($returned_count === $count) bg-grass-dark @else bg-teal-dark @endif ps-2 pe-4">
                            <a data-bs-toggle="collapse" data-id="{{$lentEquipmentGroup->id}}" class="lentEquipmentGroup_button no-effect" href="#collapse-{{$lentEquipmentGroup->id}}">

                                <i class="fa font-14 fa-hands-helping color-white"></i>
                                <span class="font-14 color-white">{{$equipment_name}}/{{$farm_id}}/{{$lentEquipmentGroup->id}}</span>
                                <span class="badge font-10 bg-white" @if($returned_count === $count)  style="color:#2aba66;" @else style="color:#7db1b1" @endif>{{$count}}</span>
                            </a>
                        </div>
                        <div class="collapse ps-2 pe-2" id="collapse-{{$lentEquipmentGroup->id}}">
                            <table class="mt-3 table table-borderless text-center rounded-s shadow-l" style="background: #eef2f1;overflow: hidden;">
                                <tbody>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Equipment</th>
                                    <td class="equipment_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Total Lent</th>
                                    <td class="total_lent color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Total Returned</th>
                                    <td class="total_returned color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Job Date</th>
                                    <td class="color-teal-white"style="margin-right: 20px;float: right;">{{ \Carbon\Carbon::parse ($job_date)->isoFormat('ddd, Do MMM, YYYY')}}</td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Contact</th>
                                    <td class="contact_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Done By</th>
                                    <td class="user_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                </tbody>
                            </table>

                            @if($returned_count === $count)

                            @else

                                <div class="row" style="margin: -15px -10px 15px -10px">
                                    <div class="col-6 text-center">
                                        <a data-id="{{$lentEquipmentGroup->id}}" style="width:-webkit-fill-available !important;" href="#" class="btn btn-full gradient-red font-13 btn-m font-600 mt-3 rounded-s delete_lent_equipment">DELETE</a>
                                    </div>
                                    <div class="col-6 text-center">
                                        <a data-id="{{$lentEquipmentGroup->id}}" @if($returned_count === $count) data-menu="" @else data-menu="returnEquipment" @endif style="width:-webkit-fill-available !important;" href="#" class="btn btn-full gradient-yellow font-13 btn-m font-600 mt-3 rounded-s return_equipment">RETURN</a>
                                    </div>
                                </div>

                            @endif

                        </div>
                    </div>
                @endforeach
            </div>

        </div>

        <div id="menu-main" class="menu menu-box-left rounded-0" data-menu-load="{{url('menu-main')}}" data-menu-width="280" data-menu-active="nav-pages"></div>

        <div id="menu-share" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-share')}}" data-menu-height="370"></div>

        <div id="menu-colors" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-colors')}}" data-menu-height="480"></div>

    </div>

    <form id="returnEquipmentForm">
        @csrf
        <div id="returnEquipment" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Return</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">EQUIPMENT</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="return_equipment_group" value="" required autocomplete="return_equipment_group" name="return_equipment_group">
                            <option value="" selected>CHOOSE EQUIPMENT GROUP(S)</option>
                            <option value="ALL">ALL EQUIPMENT GROUP</option>
                            <option value="GROUP">SPECIFIC EQUIPMENT GROUP(S)</option>
                            <option value="SPECIFIC">SPECIFIC EQUIPMENT(S)</option>
                        </select>
                        <label for="return_equipment_group" class="color-highlight">Choose Equipment Group(s)</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="return_group" style="display:none; margin-top: -10px">
                    <label for="return_specific_group" class="color-highlight">Select Equipment Group(s)</label>
                </div>
                <div class="mb-3">
                    <select class="return_selectpicker form-control" multiple id="return_specific_group" name="return_specific_group[]">
                    </select>
                </div>

                <div class="col-12" id="return_specific" style="display:none; margin-top: -10px">
                    <label for="return_specific_equipment" class="color-highlight">Select Equipment(s)</label>
                </div>
                <div class="mb-3">
                    <select class="return_selectpicka form-control" multiple id="return_specific_equipment" name="return_specific_equipment[]">
                    </select>
                </div>

                <div class="col-12" id="return_rand_equipment" style="display:none;">
                    <div class="col-12">
                        <div class="row mb-0">
                            <div class="col-6 input-style input-style-always-active has-borders no-icon mb-0">
                                <input readonly type="number" class="form-control validate-name" id="return_place_quantity" name="place_quantity" autofocus placeholder="Quantity">
                                <label for="return_place_quantity" class="color-highlight">Remaining Quantity</label>
                            </div>
                            <div class="col-6 input-style input-style-always-active has-borders no-icon mb-0">
                                <input type="number" class="form-control validate-name" id="total_returned" name="total_returned" autofocus placeholder="Quantity">
                                <label for="total_returned" class="color-highlight">Returned Quantity</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="return_equipment_house" value="" required autocomplete="return_equipment_house" name="return_equipment_house">
                            <option value="" selected>CHOOSE EQUIPMENT HOUSE</option>
                            <option value="SHED">ANIMAL HOUSE</option>
                            <option value="STORE">STORAGE HOUSE</option>
                            <option value="FIELD">PLANTING AREA</option>
                        </select>
                        <label for="return_equipment_house" class="color-highlight">Choose Equipment House</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="return_shed_group" style="display: none">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="return_shed" value="" autocomplete="return_shed" name="return_shed">
                            <option value="" selected>CHOOSE ANIMAL HOUSE</option>
                            @foreach($sheds as $shed)
                                <option value="{{$shed->id}}">{{$shed->shed_name}}</option>
                            @endforeach
                        </select>
                        <label for="return_shed" class="color-highlight">Choose Animal House</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="return_storage_group" style="display: none">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="return_storage" value="" autocomplete="return_storage" name="return_storage">
                            <option value="" selected>CHOOSE STORAGE HOUSE</option>
                            @foreach($stores as $store)
                                <option value="{{$store->id}}">{{$store->store_name}}</option>
                            @endforeach
                        </select>
                        <label for="return_storage" class="color-highlight">Choose Storage House</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="return_field_group" style="display: none">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="return_field" value="" autocomplete="return_field" name="return_field">
                            <option value="" selected>CHOOSE PLANTING AREA</option>
                            @foreach($fields as $field)
                                <option value="{{$field->id}}">{{$field->field_name}}</option>
                            @endforeach
                        </select>
                        <label for="return_field" class="color-highlight">Choose Planting Area</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <label for="job_date" class="color-highlight">Job Date</label>
                        <input type="date" name="job_date" value="{{$current_date}}" max="2030-01-01" min="2021-01-01" class="form-control validate-text" id="job_date" placeholder="JOB DATE">
                        <i class="fa fa-check disabled valid me-4 pe-3 font-12 color-green-dark"></i>
                        <i class="fa fa-check disabled invalid me-4 pe-3 font-12 color-red-dark"></i>
                    </div>
                </div>

                <button style="width:-webkit-fill-available !important;" href="#" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">RETURN EQUIPMENT</button>

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

    <form id="lendEquipmentForm">
        @csrf
        <div id="lendEquipment" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Lend</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">EQUIPMENT</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="equipmentList" value="" required autocomplete="equipmentList" name="equipmentList">
                            <option value="" selected>CHOOSE EQUIPMENT</option>
                            @foreach($equipmentLists as $equipmentList)
                                <option value="{{$equipmentList->id}}">{{$equipmentList->equipment_name}}</option>
                            @endforeach
                        </select>
                        <label for="equipmentList" class="color-highlight">Choose Equipment</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="equipment_house" value="" required autocomplete="equipment_house" name="equipment_house">
                            <option value="" selected>CHOOSE EQUIPMENT HOUSE</option>
                            <option value="SHED">ANIMAL HOUSE</option>
                            <option value="STORE">STORAGE HOUSE</option>
                            <option value="FIELD">PLANTING AREA</option>
                        </select>
                        <label for="equipment_house" class="color-highlight">Choose Equipment House</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="shed_group" style="display: none">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="shed" value="" autocomplete="shed" name="shed">
                            <option value="" selected>CHOOSE ANIMAL HOUSE</option>
                        </select>
                        <label for="shed" class="color-highlight">Choose Animal House</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="storage_group" style="display: none">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="storage" value="" autocomplete="storage" name="storage">
                            <option value="" selected>CHOOSE STORAGE HOUSE</option>
                        </select>
                        <label for="storage" class="color-highlight">Choose Storage House</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="field_group" style="display: none">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="field" value="" autocomplete="field" name="field">
                            <option value="" selected>CHOOSE PLANTING AREA</option>
                        </select>
                        <label for="field" class="color-highlight">Choose Planting Area</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="equipment_group" value="" required autocomplete="equipment_group" name="equipment_group">
                            <option value="" selected>CHOOSE EQUIPMENT GROUP(S)</option>
                            <option value="ALL">ALL EQUIPMENT GROUP</option>
                            <option value="GROUP">SPECIFIC EQUIPMENT GROUP(S)</option>
                            <option value="SPECIFIC">SPECIFIC EQUIPMENT(S)</option>
                        </select>
                        <label for="equipment_group" class="color-highlight">Choose Equipment Group(s)</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="group" style="display:none; margin-top: -10px">
                    <label for="specific_group" class="color-highlight">Select Equipment Group(s)</label>
                </div>
                <div class="mb-3">
                    <select class="selectpicker form-control" multiple id="specific_group" name="specific_group[]">
                    </select>
                </div>

                <div class="col-12" id="specific" style="display:none; margin-top: -10px">
                    <label for="specific_equipment" class="color-highlight">Select Equipment(s)</label>
                </div>
                <div class="mb-3">
                    <select class="selectpicka form-control" multiple id="specific_equipment" name="specific_equipment[]">
                    </select>
                </div>

                <div class="col-12" id="lend_rand_equipment" style="display:none;">
                    <div class="col-12">
                        <div class="row mb-0">
                            <div class="col-6 input-style input-style-always-active has-borders no-icon mb-0">
                                <input readonly type="number" class="form-control validate-name" id="lend_place_quantity" name="place_quantity" autofocus placeholder="Quantity">
                                <label for="lend_place_quantity" class="color-highlight">Remaining Quantity</label>
                            </div>
                            <div class="col-6 input-style input-style-always-active has-borders no-icon mb-0">
                                <input type="number" class="form-control validate-name" id="total_lent" name="total_lent" autofocus placeholder="Quantity">
                                <label for="total_lent" class="color-highlight">Lent Quantity</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 input-style input-style-always-active has-borders no-icon mb-4">
                    <label for="job_date" class="color-highlight">Job Date</label>
                    <input type="date" name="job_date" value="{{$current_date}}" max="{{$current_date}}" min="2021-01-01" class="form-control validate-text" id="job_date" placeholder="JOB DATE">
                    <i class="fa fa-check disabled valid me-4 pe-3 font-12 color-green-dark"></i>
                    <i class="fa fa-check disabled invalid me-4 pe-3 font-12 color-red-dark"></i>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="lend_type" value="" required autocomplete="lend_type" name="lend_type">
                            <option value="" selected>CHOOSE LEND TYPE</option>
                            <option value="PAID" >PAID</option>
                            <option value="NOT PAID" >NOT PAID</option>
                        </select>
                        <label for="lend_type" class="color-highlight">Choose Lend Type</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12" id="paid" style="display:none;">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="paid_contact_type" value=""  name="paid_contact_type">
                            <option value="" selected>CHOOSE CONTACT TYPE</option>
                            <option value="EXISTING">EXISTING CONTACT</option>
                            <option value="NEW">NEW CONTACT</option>
                        </select>
                        <span><i class="fa fa-chevron-down"></i></span>
                        <label for="paid_contact_type" class="color-highlight">Choose Contact Type</label>
                    </div>

                    <div id="exist_contact" style="display:none;" class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="paid_contact" value="" name="paid_contact">
                            <option value="" selected>SELECT CONTACT</option>
                            @foreach($contacts as $contact)
                                <option value="{{$contact->id}}">{{$contact->contact_name}}</option>
                            @endforeach
                        </select>
                        <span><i class="fa fa-chevron-down"></i></span>
                        <label for="paid_contact" class="color-highlight">Select Contact</label>
                    </div>
                    <div id="invoice_cat" style="display:none;">
                        <div class="input-style input-style-always-active has-borders no-icon mb-4">
                            <select id="invoice_type" value="" name="invoice_type">
                                <option value="" selected>CHOOSE INVOICE TYPE</option>
                                <option value="EXISTING">EXISTING INVOICE</option>
                                <option value="NEW">NEW INVOICE</option>
                            </select>
                            <span><i class="fa fa-chevron-down"></i></span>
                            <label for="invoice_type" class="color-highlight">Choose Invoice Type</label>
                        </div>

                        <div id="exist_invoice" style="display:none;" class="input-style input-style-always-active has-borders no-icon mb-4">
                            <select id="invoice" value="" name="invoice">
                                <option value="" selected>SELECT INVOICE</option>
                            </select>
                            <span><i class="fa fa-chevron-down"></i></span>
                            <label for="invoice" class="color-highlight">Select Invoice</label>

                        </div>

                        <div id="new_invoice" style="display:none;" class="input-style input-style-always-active has-borders no-icon mb-4">
                            <div class="input-style input-style-always-active has-borders mb-4">
                                <input type="text" class="form-control validate-name" id="invoice_no" name="new_invoice_no" value="" autofocus placeholder="TYPE INVOICE NUMBER">
                                <label for="invoice_no" class="color-highlight">Invoice Number</label>
                                <em>(required)</em>
                            </div>
                        </div>

                    </div>

                    <div class="col-12" id="new_contact" style="display:none;">

                        <div class="col-12">

                            <div class="input-style input-style-always-active has-borders mb-4">
                                <input type="text" class="form-control validate-name" id="invoice_no" name="invoice_no" value="" autofocus placeholder="TYPE INVOICE NUMBER">
                                <label for="invoice_no" class="color-highlight">Invoice Number</label>
                                <em>(required)</em>
                            </div>

                        </div>

                        <div class="col-12">
                            <div class="input-style input-style-always-active has-borders mb-4 input-style-active">
                                <label for="paid_category" class="color-highlight">Choose Contact Category</label>
                                <select id="paid_category" value="" name="paid_category">
                                    <option value="" selected>CHOOSE CATEGORY</option>
                                    <option value="PERSON" >PERSON</option>
                                    <option value="COMPANY" >COMPANY</option>
                                </select>
                                <span><i class="fa fa-chevron-down"></i></span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="input-style input-style-always-active has-borders mb-4">
                                <input type="text" class="form-control validate-name" id="paid_name" name="paid_name" value="" autofocus placeholder="TYPE CONTACT NAME">
                                <label for="paid_name" class="color-highlight">Contact Name</label>
                                <em>(required)</em>
                            </div>
                        </div>

                        <div class="input-style input-style-always-active has-borders validate-field">
                            <div class="row" style="margin-bottom: -15px; !important;">
                                <div class = "col-5 input-style input-style-always-active" style="margin-bottom: 0px; !important;">
                                    <select id="paid_countrycode" name="paid_countrycode">
                                        <option value="234">NG (+234)</option>
                                        @foreach($countries as $country)
                                            <option value="{{$country->phonecode}}">{{$country->iso}}                    (+{{$country->phonecode}})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class = "col-7 input-style-always-active" style="margin-bottom: 0px; !important;">
                                    <input type="number" class="form-control validate-email" id="paid_phone" name="paid_phone" value="" placeholder="812359749">
                                    <i class="fa fa-times disabled invalid color-red-dark"></i>
                                    <i class="fa fa-check disabled valid color-green-dark"></i>
                                    <em>(required)</em>
                                </div>
                            </div>
                            <label for="paid_phone" class="color-highlight">Phone Number</label>
                            <i class="fa fa-times disabled invalid color-red-dark"></i>
                            <i class="fa fa-check disabled valid color-green-dark"></i>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="input-style input-style-always-active has-borders mb-4">
                            <input type="number" class="form-control validate-name" id="paid_value" name="paid_value" value="" autofocus placeholder="PAID AMOUNT">
                            <label for="paid_value" class="color-highlight">Paid Amount</label>
                        </div>
                    </div>
                </div>

                <div class="col-12" id="not_paid" style="display:none;">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="not_paid_contact_type" value="" name="not_paid_contact_type">
                            <option value="" selected>CHOOSE CONTACT TYPE</option>
                            <option value="EXISTING">EXISTING CONTACT</option>
                            <option value="NEW">NEW CONTACT</option>
                        </select>
                        <span><i class="fa fa-chevron-down"></i></span>
                        <label for="not_paid_contact_type" class="color-highlight">Choose Contact Type</label>
                    </div>

                    <div id="not_paid_exist_contact" style="display:none;" class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="not_paid_contact" value="" name="not_paid_contact">
                            <option value="" selected>SELECT CONTACT</option>
                            @foreach($contacts as $contact)
                                <option value="{{$contact->id}}">{{$contact->contact_name}}</option>
                            @endforeach
                        </select>
                        <span><i class="fa fa-chevron-down"></i></span>
                        <label for="not_paid_contact" class="color-highlight">Select Contact</label>
                    </div>

                    <div id="not_paid_new_contact" style="display:none;" class="col-12">
                        <div class="col-12">
                            <div class="input-style input-style-always-active has-borders mb-4 input-style-active">
                                <label for="form5" class="color-highlight">Choose Contact Category</label>
                                <select id="form5" value="{{ old('category') }}" name="not_paid_category">
                                    <option value="" selected>CHOOSE CATEGORY</option>
                                    <option value="PERSON" >PERSON</option>
                                    <option value="COMPANY" >COMPANY</option>
                                </select>
                                <span><i class="fa fa-chevron-down"></i></span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="input-style input-style-always-active has-borders mb-4">
                                <input type="text" class="form-control validate-name" id="not_paid_name" name="not_paid_name" value="" autofocus placeholder="TYPE CONTACT NAME">
                                <label for="not_paid_name" class="color-highlight">Contact Name</label>
                                <em>(required)</em>
                            </div>
                        </div>

                        <div class="input-style input-style-always-active has-borders validate-field">
                            <div class="row" style="margin-bottom: -15px; !important;">
                                <div class = "col-5 input-style input-style-always-active" style="margin-bottom: 0px; !important;">
                                    <select id="not_paid_countrycode" name="not_paid_countrycode">
                                        <option value="234">NG (+234)</option>
                                        @foreach($countries as $country)
                                            <option value="{{$country->phonecode}}">{{$country->iso}}                    (+{{$country->phonecode}})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class = "col-7 input-style-always-active" style="margin-bottom: 0px; !important;">
                                    <input type="number" class="form-control validate-email" id="not_paid_phone" name="not_paid_phone" value="" placeholder="812359749">
                                    <i class="fa fa-times disabled invalid color-red-dark"></i>
                                    <i class="fa fa-check disabled valid color-green-dark"></i>
                                    <em>(required)</em>
                                </div>
                            </div>
                            <label for="not_paid_phone" class="color-highlight">Phone Number</label>
                            <i class="fa fa-times disabled invalid color-red-dark"></i>
                            <i class="fa fa-check disabled valid color-green-dark"></i>
                        </div>
                    </div>
                </div>

                <button style="width:-webkit-fill-available !important;" href="#" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">LEND EQUIPMENT</button>

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

    <form id="changeDateForm">
        @csrf
        <div id="changeDate" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Change</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">DATE</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <label for="current_date" class="color-highlight">Job Date</label>
                        <input type="date" name="current_date" value="{{$current_date}}" max="2030-01-01" min="2021-01-01" class="form-control validate-text" id="current_date" placeholder="JOB DATE">
                        <i class="fa fa-check disabled valid me-4 pe-3 font-12 color-green-dark"></i>
                        <i class="fa fa-check disabled invalid me-4 pe-3 font-12 color-red-dark"></i>
                    </div>
                </div>

                <button style="width:-webkit-fill-available !important;" href="#" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CHANGE DATE</button>

            </div>
        </div>
    </form>
@endsection

@section('footer-links')

    <script>

        function close_modal(){
            $(".modal").modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }

        $(function() {
            let db_current_date = '{{$db_current_date}}';

            let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?date=' + db_current_date  ;
            window.history.replaceState({path: newurl}, '', newurl);

            $('#lend_type').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "PAID":
                        $("#paid").show()
                        $("#not_paid").hide()
                        $("#paid_contact_type").attr("required", true);
                        $("#not_paid_contact_type").attr("required", false);
                        break;
                    case "NOT PAID":
                        $("#not_paid").show()
                        $("#paid").hide()
                        $("#not_paid_contact_type").attr("required", true);
                        $("#paid_contact_type").attr("required", false);
                        break;
                    default:
                        $("#paid").hide()
                        $("#not_paid").hide()
                        $("#paid_contact_type").attr("required", false);
                        $("#not_paid_contact_type").attr("required", false);
                }
            });

            $('#paid_contact_type').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "EXISTING":
                        $("#exist_contact").show()
                        $("#invoice_cat").show()
                        $("#new_contact").hide()
                        break;
                    case "NEW":
                        $("#exist_contact").hide()
                        $("#invoice_cat").hide()
                        $("#new_contact").show()
                        break;
                    default:
                        $("#exist_contact").hide()
                        $("#new_contact").hide()
                        $("#invoice_cat").hide()
                }
            });

            $('#invoice_type').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "EXISTING":
                        $("#exist_invoice").show()
                        $("#new_invoice").hide()
                        break;
                    case "NEW":
                        $("#new_invoice").show()
                        $("#exist_invoice").hide()
                        break;
                    default:
                        $("#exist_invoice").hide()
                        $("#new_invoice").hide()
                }
            });

            $('#not_paid_contact_type').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "EXISTING":
                        $("#not_paid_exist_contact").show()
                        $("#not_paid_new_contact").hide()
                        break;
                    case "NEW":
                        $("#not_paid_exist_contact").hide()
                        $("#not_paid_new_contact").show()
                        break;
                    default:
                        $("#not_paid_exist_contact").hide()
                        $("#not_paid_new_contact").hide()
                }
            });

            $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
            $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();

            $('.return_selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
            $('.return_selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();

            function repeater_plugin(){
                $("body").find('.repeater').repeater({
                    defaultValues: {
                    },
                    show: function () {
                        $(this).slideDown();
                    },
                    hide: function (deleteElement) {
                        $(this).slideUp(deleteElement);
                    },
                    ready: function (setIndexes) {

                    }
                });
            }

            repeater_plugin();

            $('#equipment_house').on('change',function(){
                $('#specific_group')
                    .find('option')
                    .remove()
                    .end()
                $('#specific_equipment')
                    .find('option')
                    .remove()
                    .end()
                $('#equipment_group').val('')
                $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                $("#group").hide()
                $("#specific").hide()
                var selection = $(this).val();
                switch(selection){
                    case "SHED":
                        $("#shed_group").show()
                        $("#storage_group").hide()
                        $("#field_group").hide()
                        break;
                    case "STORE":
                        $("#storage_group").show()
                        $("#shed_group").hide()
                        $("#field_group").hide()
                        break;
                    case "FIELD":
                        $("#field_group").show()
                        $("#shed_group").hide()
                        $("#storage_group").hide()
                        break;
                    default:
                        $("#storage_group").hide()
                        $("#shed_group").hide()
                        $("#field_group").hide()
                }
            });

            $('#return_equipment_house').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "SHED":
                        $("#return_shed_group").show()
                        $("#return_storage_group").hide()
                        $("#return_field_group").hide()
                        break;
                    case "STORE":
                        $("#return_storage_group").show()
                        $("#return_shed_group").hide()
                        $("#return_field_group").hide()
                        break;
                    case "FIELD":
                        $("#return_field_group").show()
                        $("#return_shed_group").hide()
                        $("#return_storage_group").hide()
                        break;
                    default:
                        $("#return_storage_group").hide()
                        $("#return_shed_group").hide()
                        $("#return_field_group").hide()
                }
            });

            $('#equipment_group').on('change',function(){
                var selection = $(this).val();
                $('#lend_place_quantity').val(0);
                $('#specific_group').val('');
                switch(selection){
                    case "GROUP":
                        $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().show();
                        $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)" }).next().hide();
                        $("#group").show()
                        $("#specific").hide()
                        $("#lend_rand_equipment").show();
                        break;
                    case "SPECIFIC":
                        $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                        $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)" }).next().show();
                        $("#group").hide()
                        $("#specific").show()
                        $("#lend_rand_equipment").hide();
                        break;
                    case "ALL":
                        $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                        $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                        $("#group").hide()
                        $("#specific").hide()
                        $("#lend_rand_equipment").show();

                        reduce_equipment_house = $('#equipment_house').val()
                        reduce_shed = $('#shed').val()
                        reduce_field = $('#field').val()
                        reduce_store = $('#storage').val()
                        reduce_equipment = $('#equipmentList').val()

                        $('#lend_place_quantity').val(0)

                        let $_this= $(this);
                        $.ajax({
                            type: "GET",
                            url: "equipment_place_total",
                            dataType: "json",
                            data:{
                                reduce_shed: reduce_shed,
                                reduce_store: reduce_store,
                                reduce_equipment_house: reduce_equipment_house,
                                reduce_field: reduce_field,
                                reduce_equipment: reduce_equipment
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    $('#lend_place_quantity').val(response.reduce_place_quantity);
                                }
                                else{
                                    $('#lend_place_quantity').val(0);
                                }
                            }
                        });
                        break;
                    default:
                        $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                        $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                        $("#group").hide()
                        $("#specific").hide()
                        $("#lend_rand_equipment").hide();
                }
            });

            $('.selectpicker').on("change", function (e) {

                groups = $('#specific_group').val();
                reduce_equipment_house = $('#equipment_house').val()
                reduce_shed = $('#shed').val()
                reduce_field = $('#field').val()
                reduce_store = $('#storage').val()

                $('#lend_place_quantity').val(0)
                console.log(groups);

                let $_this= $(this);
                $.ajax({
                    type: "GET",
                    url: "equipment_place_quantity",
                    dataType: "json",
                    data:{
                        groups: groups,
                        reduce_shed: reduce_shed,
                        reduce_store: reduce_store,
                        reduce_equipment_house: reduce_equipment_house,
                        reduce_field: reduce_field,
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $('#lend_place_quantity').val(response.reduce_place_quantity);
                        }
                        else{
                            $('#lend_place_quantity').val(0);
                        }
                    }
                });


            });

            $('#return_equipment_group').on('change',function(){
                var selection = $(this).val();
                $('#return_place_quantity').val(0);
                $('#return_specific_group').val('');
                switch(selection){
                    case "GROUP":
                        $('.return_selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().show();
                        $('.return_selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)" }).next().hide();
                        $("#return_group").show()
                        $("#return_specific").hide()
                        $("#return_rand_equipment").show();
                        break;
                    case "SPECIFIC":
                        $('.return_selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                        $('.return_selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)" }).next().show();
                        $("#return_group").hide()
                        $("#return_specific").show()
                        $("#return_rand_equipment").hide();
                        break;
                    case "ALL":
                        $('.return_selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                        $('.return_selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                        $("#return_group").hide()
                        $("#return_specific").hide()
                        $("#return_rand_equipment").show();

                        $('#return_place_quantity').val(0)

                        let $_this= $(this);
                        $.ajax({
                            type: "GET",
                            url: "view_lent_equipment_info",
                            dataType: "json",
                            data:{
                                lentEquipmentGroup_id: lentEquipmentGroup_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    $('#return_place_quantity').val(response.total_not_returned);
                                }
                                else{
                                    $('#return_place_quantity').val(0);
                                }
                            }
                        });
                        break;
                    default:
                        $('.return_selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                        $('.return_selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                        $("#return_group").hide()
                        $("#return_specific").hide()
                        $("#return_rand_equipment").hide();
                }
            });

            $('.return_selectpicker').on("change", function (e) {

                var groups = $('#return_specific_group').val();
                $('#return_place_quantity').val(0)

                let $_this= $(this);
                $.ajax({
                    type: "GET",
                    url: "view_lent_equipment_group_info",
                    dataType: "json",
                    data:{
                        groups: groups,
                        lentEquipmentGroup_id: lentEquipmentGroup_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $('#return_place_quantity').val(response.total_not_returned);
                        }
                        else{
                            $('#return_place_quantity').val(0);
                        }
                    }
                });

            });

            let equipment_list_id, shed_id, storage_id, field_id, lentEquipmentGroup_id, paid_contact, current_date, reduce_shed, reduce_store, reduce_equipment_house, reduce_field, reduce_equipment;

            $(".page-content").on("click", ".lentEquipmentGroup_button", function (e) {
                lentEquipmentGroup_id = $(this).data("id");
                console.log(lentEquipmentGroup_id);

                let $_this= $(this);
                $.ajax({
                    type: "GET",
                    url: "view_lent_equipment_info",
                    dataType: "json",
                    data:{
                        lentEquipmentGroup_id: lentEquipmentGroup_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $_this.parents(".card").find(".equipment_name").text(response.equipment_name);
                            $_this.parents(".card").find(".job_date").text(response.job_date);
                            $_this.parents(".card").find(".user_name").text(response.user_name);
                            $_this.parents(".card").find(".total_lent").text(response.total_lent);
                            $_this.parents(".card").find(".total_returned").text(response.total_returned);
                            $_this.parents(".card").find(".contact_name").text(response.contact_name);
                            $('#return_specific_group')
                                .find('option')
                                .remove()
                                .end()
                            $.each(response.return_equipment_groups,function(key,value){
                                $("#return_specific_group").append('<option value="'+value.id+'">'+value.group_name+'/'+value.id+'</option>');
                            });
                            $('#return_specific_equipment')
                                .find('option')
                                .remove()
                                .end()
                            $.each(response.return_equipments,function(key,value){
                                $("#return_specific_equipment").append('<option value="'+value.id+'">'+value.equipment_name+'/'+value.id+'</option>');
                            });
                        }
                        else{
                        }
                    }
                });

            })

            $(".page-content").on("click", ".return_equipment", function (e) {
                lentEquipmentGroup_id = $(this).data("id");
                var element = document.getElementById("returnEquipment");
                element.classList.add("menu-active");
                var element = document.getElementById("logger");
                element.classList.add("menu-active");

                let $_this= $(this);
                $.ajax({
                    type: "GET",
                    url: "view_lent_equipment_info",
                    dataType: "json",
                    data:{
                        lentEquipmentGroup_id: lentEquipmentGroup_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $_this.parents(".card").find(".equipment_name").text(response.equipment_name);
                            $_this.parents(".card").find(".job_date").text(response.job_date);
                            $_this.parents(".card").find(".user_name").text(response.user_name);
                            $_this.parents(".card").find(".total_lent").text(response.total_lent);
                            $_this.parents(".card").find(".total_returned").text(response.total_returned);
                            $_this.parents(".card").find(".contact_name").text(response.contact_name);
                            $('#return_specific_group')
                                .find('option')
                                .remove()
                                .end()
                            $.each(response.return_equipment_groups,function(key,value){
                                $("#return_specific_group").append('<option value="'+value.id+'">'+value.group_name+'/'+value.id+'</option>');
                            });
                            $('#return_specific_equipment')
                                .find('option')
                                .remove()
                                .end()
                            $.each(response.return_equipments,function(key,value){
                                $("#return_specific_equipment").append('<option value="'+value.id+'">'+value.equipment_name+'/'+value.id+'</option>');
                            });
                        }
                        else{
                        }
                    }
                });

            })

            $('#equipmentList').on('change',function(){

                equipment_list_id = $(this).val();
                $('#equipment_house').val('')
                $('#equipment_group').val('')
                $("#storage_group").hide()
                $("#shed_group").hide()
                $("#field_group").hide()
                $('#specific_group')
                    .find('option')
                    .remove()
                    .end()
                $('#specific_equipment')
                    .find('option')
                    .remove()
                    .end()
                $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                $("#group").hide()
                $("#specific").hide()
                console.log(equipment_list_id);
                $.ajax({
                    type: "POST",
                    url: "get_equipment_details",
                    dataType: "json",
                    data:{
                        equipment_list_id: equipment_list_id
                    },
                    success: function (response) {
                        $('#shed')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE ANIMAL HOUSE</option>');
                        $.each(response.sheds,function(key,value){
                            $("#shed").append('<option value="'+value.id+'">'+value.shed_name+'</option>');
                        });
                        $('#storage')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE STORAGE HOUSE</option>');
                        $.each(response.storages,function(key,value){
                            $("#storage").append('<option value="'+value.id+'">'+value.store_name+'</option>');
                        });
                        $('#field')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE PLANTING AREA</option>');
                        $.each(response.fields,function(key,value){
                            $("#field").append('<option value="'+value.id+'">'+value.field_name+'</option>');
                        });
                    }
                });
            });

            $('#shed').on('change',function(){

                $('#equipment_group').val('')
                $('#specific_group')
                    .find('option')
                    .remove()
                    .end()
                $('#specific_equipment')
                    .find('option')
                    .remove()
                    .end()
                $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                $("#group").hide()
                $("#specific").hide()

                equipment_list_id = $('#equipmentList').val();
                shed_id = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "get_shed_equipments",
                    dataType: "json",
                    data:{
                        equipment_list_id: equipment_list_id,
                        shed_id: shed_id
                    },
                    success: function (response) {
                        $('#specific_group')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.shed_groups,function(key,value){
                            $("#specific_group").append('<option value="'+value.id+'">'+value.group_name+'/'+value.id+'</option>');
                        });
                        $('#specific_equipment')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.equipments,function(key,value){
                            $("#specific_equipment").append('<option value="'+value.id+'">'+value.equipment_name+'/'+value.id+'</option>');
                        });
                    }
                });
            });

            $('#storage').on('change',function(){

                $('#equipment_group').val('')
                $('#specific_group')
                    .find('option')
                    .remove()
                    .end()
                $('#specific_equipment')
                    .find('option')
                    .remove()
                    .end()
                $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                $("#group").hide()
                $("#specific").hide()

                equipment_list_id = $('#equipmentList').val();
                storage_id = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "get_store_equipments",
                    dataType: "json",
                    data:{
                        equipment_list_id: equipment_list_id,
                        storage_id: storage_id
                    },
                    success: function (response) {
                        $('#specific_group')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.store_groups,function(key,value){
                            $("#specific_group").append('<option value="'+value.id+'">'+value.group_name+'/'+value.id+'</option>');
                        });
                        $('#specific_equipment')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.equipments,function(key,value){
                            $("#specific_equipment").append('<option value="'+value.id+'">'+value.equipment_name+'/'+value.id+'</option>');
                        });
                    }
                });
            });

            $('#field').on('change',function(){

                $('#equipment_group').val('')
                $('#specific_group')
                    .find('option')
                    .remove()
                    .end()
                $('#specific_equipment')
                    .find('option')
                    .remove()
                    .end()
                $('.selectpicka').select2({ placeholder: "SELECT EQUIPMENT(S)"}).next().hide();
                $('.selectpicker').select2({ placeholder: "SELECT EQUIPMENT GROUP(S)" }).next().hide();
                $("#group").hide()
                $("#specific").hide()

                equipment_list_id = $('#equipmentList').val();
                field_id = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "get_field_equipments",
                    dataType: "json",
                    data:{
                        equipment_list_id: equipment_list_id,
                        field_id: field_id
                    },
                    success: function (response) {
                        $('#specific_group')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.field_groups,function(key,value){
                            $("#specific_group").append('<option value="'+value.id+'">'+value.group_name+'/'+value.id+'</option>');
                        });
                        $('#specific_equipment')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.equipments,function(key,value){
                            $("#specific_equipment").append('<option value="'+value.id+'">'+value.equipment_name+'/'+value.id+'</option>');
                        });
                    }
                });
            });

            $('#paid_contact').on('change',function(){

                paid_contact = $(this).val();
                console.log(paid_contact);
                $.ajax({
                    type: "POST",
                    url: "get_contact_invoices",
                    dataType: "json",
                    data:{
                        paid_contact: paid_contact
                    },
                    success: function (response) {
                        $('#invoice')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">SELECT INVOICE</option>');
                        $.each(response.invoices,function(key,value){
                            $("#invoice")
                                .append('<option value="'+value.id+'">'+value.invoice_no+'</option>');
                        });
                    }
                });
            });

            $("#lendEquipmentForm").submit(function(e){
                e.preventDefault();
                var error = false;

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Equipment will be lent to contact!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#lendEquipmentForm").ajaxSubmit({
                                type: "POST",
                                url: "lend-equipment",
                                dataType: "json",
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Equipment lent", "success");

                                        $(".job-content").load(location.href+(' .job-content'));
                                        $('#lendEquipmentForm').resetForm();
                                        $("#filtered_date").load(location.href+(' #filtered_date'));
                                        var element = document.getElementById("lendEquipment");
                                        element.classList.remove("menu-active");
                                        var element = document.getElementById("logger");
                                        element.classList.remove("menu-active");

                                    } else{
                                        swal("Cancelled!", response.msg, "error")

                                    }
                                }
                            });
                        });

                }
            });

            $("#returnEquipmentForm").submit(function(e){
                e.preventDefault();
                var error = false;

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Equipment will be returned to farm!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#returnEquipmentForm").ajaxSubmit({
                                type: "POST",
                                url: "return_equipment",
                                dataType: "json",
                                data:{
                                    lentEquipmentGroup_id: lentEquipmentGroup_id
                                },
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Equipment has been returned", "success");

                                        $(".job-content").load(location.href+(' .job-content'));
                                        $('#returnEquipmentForm').resetForm();
                                        $("#filtered_date").load(location.href+(' #filtered_date'));
                                        var element = document.getElementById("returnEquipment");
                                        element.classList.remove("menu-active");
                                        var element = document.getElementById("logger");
                                        element.classList.remove("menu-active");


                                    } else{
                                        swal("Cancelled!", response.msg, "error")

                                    }
                                }
                            });
                        });

                }
            });

            $('#current_date').on('change',function(){
                current_date = $(this).val();
                console.log(current_date);
            })

            $("#changeDateForm").submit(function(e){
                e.preventDefault();
                var error = false;
                current_date = $('#current_date').val();
                if(!error){
                    close_modal();
                    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?date=' + current_date  ;
                    window.history.replaceState({path: newurl}, '', newurl);

                    $(".job-content").load(location.href+(' .job-content'));
                    $('#changeDateForm').resetForm();
                    $("#filtered_date").load(location.href+(' #filtered_date'));
                    var element = document.getElementById("changeDate");
                    element.classList.remove("menu-active");
                    var element = document.getElementById("logger");
                    element.classList.remove("menu-active");

                }
            });

            $(".page-content").on("click", ".delete_lent_equipment", function (e) {

                movedGroup_id = $(this).data("id");
                console.log(movedGroup_id);
                swal({
                        title: "Are you sure?",
                        text: "Equipment Lending will be deleted!",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        $.ajax({
                            type: "DELETE",
                            url: "delete_lent_equipment",
                            dataType: "json",
                            data:{
                                movedGroup_id: movedGroup_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    swal("Done!", "Equipment Lending Deleted", "success");

                                    $(".job-content").load(location.href+(' .job-content'));

                                    var element = document.getElementById("logger");
                                    element.classList.remove("menu-active");

                                } else{
                                    swal("Cancelled!", response.msg, "error")

                                }
                            }
                        });
                    });

            })


        });

    </script>

    </body>
    </html>
@endsection