@extends('layouts.master')

@section('title', 'Farm App - Inspect and Count')

@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-6 text-center">
                        <a data-menu="addCount" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s"><i class="fa fa-calculator"></i>  ADD COUNT</a>
                    </div>
                    <div class="col-6 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">Inspect and Count</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($assetCounts as $assetCount)
                    <div class="card card-style mb-3 rounded-s">

                        @php $job_date = DB::table('inspect_and_count')->where('id', $assetCount->id)->value('count_date'); if($assetCount->asset_name === 'LIVESTOCK') $asset_name = DB::table('livestock_lists')->where('id', $assetCount->asset_list_id)->value('animal_name'); elseif($assetCount->asset_name === 'EQUIPMENT') $asset_name = DB::table('equipment_lists')->where('id', $assetCount->asset_list_id)->value('equipment_name'); elseif ($assetCount->asset_name === 'EQUIPMENT INVENTORY') $asset_name = DB::table('equipment_inventory_lists')->where('id', $assetCount->asset_list_id)->value('inventory_name'); elseif($assetCount->asset_name === 'LIVESTOCK INVENTORY') $asset_name = DB::table('livestock_inventory_lists')->where('id', $assetCount->asset_list_id)->value('inventory_name'); else $asset_name = DB::table('crop_inventory_lists')->where('id', $assetCount->asset_list_id)->value('inventory_name'); @endphp

                        <div class="list-group list-custom-small list-icon-0 bg-grass-dark ps-2 pe-4">
                            <a data-bs-toggle="collapse" data-id="{{$assetCount->id}}" class="assetCount_button no-effect" href="#collapse-{{$assetCount->id}}">

                                <i class="fa font-14 fa-calculator color-white"></i>
                                <span class="font-14 color-white">{{$asset_name}} {{$farm_id}}/{{$assetCount->id}}</span>
                                <span class="badge font-10 bg-white" style="color:#2aba66;">{{$assetCount->count_total}}</span>
                            </a>
                        </div>
                        <div class="collapse ps-2 pe-2" id="collapse-{{$assetCount->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;">Farm Area</th>
                                    <td class="place_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Asset</th>
                                    <td class="asset_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Asset Type</th>
                                    <td class="asset_variety color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Total Count</th>
                                    <td class="total_count color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Report 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;">Created By</th>
                                    <td class="user_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>

                                </tbody>
                            </table>

                            <a data-id="{{$assetCount->id}}" style="width:-webkit-fill-available !important;" href="#" class="mb-3 btn btn-full gradient-orange font-13 btn-m font-600 mt-3 rounded-s delete_count">DELETE</a>

                        </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="addCountForm">
        @csrf
        <div id="addCount" 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">Add Count</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">REPORT</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="asset_type" value="" required autocomplete="asset_type" name="asset_type">
                            <option value="" selected>CHOOSE ASSET TYPE</option>
                            <option value="LIVESTOCK">LIVESTOCK</option>
                            <option value="EQUIPMENT">EQUIPMENT</option>
                            <option value="LIVESTOCK INVENTORY">LIVESTOCK INVENTORY</option>
                            <option value="CROP INVENTORY">CROP INVENTORY</option>
                            <option value="EQUIPMENT INVENTORY">EQUIPMENT INVENTORY</option>
                        </select>
                        <label for="asset_type" class="color-highlight">Choose Asset Type</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="" id="livestock"style="display: none">

                    <div class="col-12">
                        <div class="input-style input-style-always-active has-borders no-icon mb-4">
                            <select id="livestockList" value="" autocomplete="livestockList" name="livestockList">
                                <option value="" selected>CHOOSE LIVESTOCK</option>
                                @foreach($livestockLists as $livestockList)
                                    <option value="{{$livestockList->id}}">{{$livestockList->animal_name}}</option>
                                @endforeach
                            </select>
                            <label for="livestockList" class="color-highlight">Choose Livestock</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="animal_type" value="" autocomplete="animal_type" name="animal_type">
                                <option value="" selected>CHOOSE ANIMAL TYPE</option>
                            </select>
                            <label for="animal_type" class="color-highlight">Choose Animal Type</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="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>

                <div class="" id="equipment" style="display: none">

                    <div class="col-12">
                        <div class="input-style input-style-always-active has-borders no-icon mb-4">
                            <select id="equipmentList" value="" 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="" 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="eq_shed" value="" autocomplete="eq_shed" name="eq_shed">
                                <option value="0" selected>CHOOSE ANIMAL HOUSE</option>
                            </select>
                            <label for="eq_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="eq_store" value="" autocomplete="eq_store" name="eq_store">
                                <option value="" selected>CHOOSE STORAGE HOUSE</option>
                            </select>
                            <label for="eq_store" 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="eq_field" value="" autocomplete="eq_field" name="eq_field">
                                <option value="" selected>CHOOSE PLANTING AREA</option>
                            </select>
                            <label for="eq_field" class="color-highlight">Choose Planting Area</label>
                            <span><i class="fa fa-chevron-down"></i></span>
                        </div>
                    </div>

                </div>

                <div class="" id="livestock_inv" style="display: none">

                    <div class="col-12">
                        <div class="input-style input-style-always-active has-borders no-icon mb-4">
                            <select id="livestockInv" value="" autocomplete="livestockInv" name="livestockInv">
                                <option value="" selected>CHOOSE INVENTORY</option>
                                @foreach($livestockInvLists as $livestockInvList)
                                    <option value="{{$livestockInvList->id}}">{{$livestockInvList->inventory_name}}</option>
                                @endforeach
                            </select>
                            <label for="livestockInv" class="color-highlight">Choose Inventory</label>
                            <span><i class="fa fa-chevron-down"></i></span>
                        </div>
                    </div>

                </div>

                <div class="" id="crop_inv" style="display: none">

                    <div class="col-12">
                        <div class="input-style input-style-always-active has-borders no-icon mb-4">
                            <select id="cropInv" value="" autocomplete="cropInv" name="cropInv">
                                <option value="" selected>CHOOSE INVENTORY</option>
                                @foreach($cropInvLists as $cropInvList)
                                    <option value="{{$cropInvList->id}}">{{$cropInvList->inventory_name}}</option>
                                @endforeach
                            </select>
                            <label for="cropInv" class="color-highlight">Choose Inventory</label>
                            <span><i class="fa fa-chevron-down"></i></span>
                        </div>
                    </div>

                </div>

                <div class="" id="equipment_inv" style="display: none">

                    <div class="col-12">
                        <div class="input-style input-style-always-active has-borders no-icon mb-4">
                            <select id="equipmentInv" value="" autocomplete="equipmentInv" name="equipmentInv">
                                <option value="" selected>CHOOSE INVENTORY</option>
                                @foreach($equipmentInvLists as $equipmentInvList)
                                    <option value="{{$equipmentInvList->id}}">{{$equipmentInvList->inventory_name}}</option>
                                @endforeach
                            </select>
                            <label for="equipmentInv" class="color-highlight">Choose Inventory</label>
                            <span><i class="fa fa-chevron-down"></i></span>
                        </div>
                    </div>

                </div>

                <div class="col-12" id="inv_varieties" style="display: none">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="inventory_variety" value="" autocomplete="inventory_variety" name="inventory_variety">
                            <option value="" selected>CHOOSE INVENTORY VARIETY</option>
                        </select>
                        <label for="inventory_variety" class="color-highlight">Choose Inventory Variety</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

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

                <div class="col-12">
                    <div class="row mb-0">
                        <div class="col-6 input-style input-style-always-active has-borders no-icon mb-4">
                            <label for="report_date" class="color-highlight">Report Date</label>
                            <input type="date" name="report_date" value="{{$current_date}}" max="{{$current_date}}" min="2021-01-01" class="form-control validate-text" id="report_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-6 input-style input-style-always-active has-borders no-icon mb-0">
                            <input type="text" class="form-control validate-name" id="total_count" name="total_count" autofocus required placeholder="TOTAL COUNT">
                            <label for="total_count" class="color-highlight">Total Counted</label>
                        </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">ADD COUNT</button>

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

    <form id="detachTagForm">
        @csrf
        <div id="detachTag" 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">Detach</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">TAG</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="asset_group" value="" required name="asset_group">
                            <option value="" selected>CHOOSE ASSET GROUP(S)</option>
                        </select>
                        <label for="asset_group" class="color-highlight">Choose Asset Group(s)</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

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

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

                <div class="col-12 input-style input-style-always-active has-borders no-icon mb-4">
                    <label for="job_date" class="color-highlight">Done 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="DONE 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>

                <button style="width:-webkit-fill-available !important;" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s mb-3">DETACH TAG</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);

            $('#asset_type').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "LIVESTOCK":
                        $("#livestock").show()
                        $("#equipment").hide()
                        $("#crop_inv").hide()
                        $("#livestock_inv").hide()
                        $("#equipment_inv").hide()
                        $("#inv_store").hide()
                        $("#inv_varieties").hide()
                        break;
                    case "EQUIPMENT":
                        $("#equipment").show()
                        $("#livestock").hide()
                        $("#crop_inv").hide()
                        $("#livestock_inv").hide()
                        $("#equipment_inv").hide()
                        $("#inv_store").hide()
                        $("#inv_varieties").hide()
                        break;
                    case "LIVESTOCK INVENTORY":
                        $("#equipment").hide()
                        $("#livestock").hide()
                        $("#crop_inv").hide()
                        $("#livestock_inv").show()
                        $("#equipment_inv").hide()
                        $("#inv_store").show()
                        $("#inv_varieties").show()
                        break;
                    case "CROP INVENTORY":
                        $("#equipment").hide()
                        $("#livestock").hide()
                        $("#crop_inv").show()
                        $("#livestock_inv").hide()
                        $("#equipment_inv").hide()
                        $("#inv_store").show()
                        $("#inv_varieties").show()
                        break;
                    case "EQUIPMENT INVENTORY":
                        $("#equipment").hide()
                        $("#livestock").hide()
                        $("#crop_inv").hide()
                        $("#livestock_inv").hide()
                        $("#equipment_inv").show()
                        $("#inv_store").show()
                        $("#inv_varieties").hide()
                        break;
                    default:
                        $("#equipment").hide()
                        $("#livestock").hide()
                        $("#crop_inv").hide()
                        $("#livestock_inv").hide()
                        $("#equipment_inv").hide()
                        $("#inv_store").hide()
                        $("#inv_varieties").hide()
                }
            });

            $('#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:
                        $("#field_group").hide()
                        $("#storage_group").hide()
                        $("#shed_group").hide()
                }
            });

            $("#group").hide();
            $("#specific").hide();
            $('.selectpicker').select2({ placeholder: "SELECT LIVESTOCK GROUP(S)" }).next().hide();
            $('.selectpicka').select2({ placeholder: "SELECT LIVESTOCK(S)"}).next().hide();
            $('.crop_selectpicker').select2({ placeholder: "SELECT PLANTATION(S)" }).next().hide();
            $('#plantation_group').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "GROUP":
                        $('.crop_selectpicker').select2({ placeholder: "SELECT PLANTATION(S)" }).next().show();
                        $("#group").show()
                        break;
                    default:
                        $('.crop_selectpicker').select2({ placeholder: "SELECT PLANTATION(S)" }).next().hide();
                        $("#crop_group").hide()
                }
            });


            $("#detach_group").hide();
            $("#detach_specific").hide();
            $('.detach_selectpicker').select2({ placeholder: "SELECT ASSET GROUP(S)" }).next().hide();
            $('.detach_selectpicka').select2({ placeholder: "SELECT ASSET(S)"}).next().hide();
            $('#asset_group').on('change',function(){
                var selection = $(this).val();
                switch(selection){
                    case "GROUP":
                        $('.detach_selectpicker').select2({ placeholder: "SELECT ASSET GROUP(S)" }).next().show();
                        $('.detach_selectpicka').select2({ placeholder: "SELECT ASSET(S)" }).next().hide();
                        $("#detach_group").show()
                        $("#detach_specific").hide()
                        break;
                    case "SPECIFIC":
                        $('.detach_selectpicker').select2({ placeholder: "SELECT ASSET GROUP(S)" }).next().hide();
                        $('.detach_selectpicka').select2({ placeholder: "SELECT ASSET(S)" }).next().show();
                        $("#detach_group").hide()
                        $("#detach_specific").show()
                        break;
                    case "ALL":
                        $('.detach_selectpicker').select2({ placeholder: "SELECT ASSET GROUP(S)" }).next().hide();
                        $('.detach_selectpicka').select2({ placeholder: "SELECT ASSET(S)" }).next().hide();
                        $("#detach_group").hide()
                        $("#detach_specific").hide()
                        break;
                    default:
                        $('.detach_selectpicker').select2({ placeholder: "SELECT ASSET GROUP(S)" }).next().hide();
                        $('.detach_selectpicka').select2({ placeholder: "SELECT ASSET(S)" }).next().hide();
                        $("#detach_group").hide()
                        $("#detach_specific").hide()
                }
            });

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

                    }
                });
            }

            repeater_plugin();

            let livestock_list_id, crop_list_id, field_id, type_name, countReport_id, animal_name, shed_id, animal_type_id, type_id, plant_name, livestock_inventory_id, crop_inventory_id, current_date;

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

                let $_this= $(this);
                $.ajax({
                    type: "GET",
                    url: "view_asset_count_info",
                    dataType: "json",
                    data:{
                        countReport_id: countReport_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $_this.parents(".card").find(".user_name").text(response.username);
                            $_this.parents(".card").find(".total_count").text(response.total_count);
                            $_this.parents(".card").find(".place_name").text(response.place_name);
                            $_this.parents(".card").find(".asset_name").text(response.asset_name);
                            $_this.parents(".card").find(".asset_variety").text(response.asset_variety);
                        }
                        else{
                        }
                    }
                });

            })

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

                $("#detach_group").hide();
                $("#detach_specific").hide();
                $('.detach_selectpicker').select2({ placeholder: "SELECT ASSET GROUP(S)" }).next().hide();
                $('.detach_selectpicka').select2({ placeholder: "SELECT ASSET(S)"}).next().hide();
                $('#asset_group')
                    .find('option')
                    .remove()
                    .end()
                    .append('<option value="">CHOOSE ASSET GROUP(S)</option>')

                let $_this= $(this);
                $.ajax({
                    type: "GET",
                    url: "view_tagged_assets_info",
                    dataType: "json",
                    data:{
                        tag_Report_id: tag_Report_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            if(response.asset_type === "LIVESTOCK"){
                                $('#asset_group')
                                    .find('option')
                                    .remove()
                                    .end()
                                    .append('<option value="">CHOOSE ASSET GROUP(S)</option>')
                                    .append('<option value="ALL">ALL ASSET</option>')
                                    .append('<option value="GROUP">SPECIFIC ASSET GROUP(S)</option>')
                                    .append('<option value="SPECIFIC">SPECIFIC ASSET</option>')
                            }

                            else{
                                $('#asset_group')
                                    .find('option')
                                    .remove()
                                    .end()
                                    .append('<option value="">CHOOSE ASSET GROUP(S)</option>')
                                    .append('<option value="ALL">ALL ASSET</option>')
                                    .append('<option value="SPECIFIC">SPECIFIC ASSET</option>')
                            }
                            $('.detach_selectpicka')
                                .find('option')
                                .remove()
                                .end()
                                .append('<option value="">SELECT ASSSET(S)</option>');
                            $.each(response.assets,function(key,value){
                                $(".detach_selectpicka")
                                    .append('<option value="'+value.id+'">'+value.id+'</option>');
                            });
                            $('.detach_selectpicker')
                                .find('option')
                                .remove()
                                .end()
                                .append('<option value="">SELECT ASSET GROUP(S)</option>');
                            $.each(response.group_ids,function(key,value){
                                $(".detach_selectpicker").append('<option value="'+value.id+'">'+value.id+'</option>');
                            });
                        }
                        else{
                        }
                    }
                });
            })

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

                livestock_list_id = $(this).val();
                console.log(livestock_list_id);
                $.ajax({
                    type: "POST",
                    url: "get_livestock_attr",
                    dataType: "json",
                    data:{
                        livestock_list_id: livestock_list_id
                    },
                    success: function (response) {
                        $('#animal_stage')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE ANIMAL STAGE</option>');
                        $.each(response.stages,function(key,value){
                            $("#animal_stage")
                                .append('<option value="'+value.id+'">'+value.stage_name+'</option>');
                        });
                        $('#animal_type')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE ANIMAL TYPE</option>');
                        $.each(response.types,function(key,value){
                            $("#animal_type").append('<option value="'+value.id+'">'+value.type_name+'</option>');
                        });
                    }
                });
            });

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

                type_id = $(this).val();
                livestock_list_id = $('#livestockList').val();
                dropdown = $('#animal_type');
                type_name = dropdown.find("option:selected").text();
                console.log(type_name);
                console.log(type_id);

                $.ajax({
                    type: "POST",
                    url: "get_livestock_sheds",
                    dataType: "json",
                    data:{
                        type_id: type_id,
                        livestock_list_id: livestock_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>');
                        });
                    }
                });

            })

            $('#shed').on('change', function (){
                shed_id = $(this).val();
                type_id = $('#animal_type').val();
                livestock_list_id = $('#livestockList').val();

                $.ajax({
                    type: "POST",
                    url: "get_shed_livestocks",
                    dataType: "json",
                    data:{
                        shed_id: shed_id,
                        type_id: type_id,
                        livestock_list_id: livestock_list_id
                    },
                    success: function (response) {
                        $('#specific_group')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.groups,function(key,value){
                            $("#specific_group").append('<option value="'+value.id+'">'+value.group_name+'</option>');
                        });
                        $('#specific_livestock')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.livestocks,function(key,value){
                            $("#specific_livestock").append('<option value="'+value.id+'">'+value.livestock_name+'</option>');
                        });
                    }
                });
            })

            $('#livestock_group').on('change',function(){
                $('#shed_quantity').val(0)
                var selection = $(this).val();
                switch(selection){
                    case "GROUP":
                        $('.selectpicker').select2({ placeholder: "SELECT LIVESTOCK GROUP(S)" }).next().show();
                        $('.selectpicka').select2({ placeholder: "SELECT LIVESTOCK(S)" }).next().hide();
                        $("#group").show()
                        $("#specific").hide()
                        $("#rand_livestock").show()
                        break;
                    case "SPECIFIC":
                        $('.selectpicker').select2({ placeholder: "SELECT LIVESTOCK GROUP(S)" }).next().hide();
                        $('.selectpicka').select2({ placeholder: "SELECT LIVESTOCK(S)" }).next().show();
                        $("#group").hide()
                        $("#specific").show()
                        $("#rand_livestock").hide();
                        break;
                    case "ALL":
                        $('.selectpicka').select2({ placeholder: "SELECT LIVESTOCK(S)"}).next().hide();
                        $('.selectpicker').select2({ placeholder: "SELECT LIVESTOCK GROUP(S)" }).next().hide();
                        $("#group").hide()
                        $("#specific").hide()
                        $("#rand_livestock").show();
                        var shed = $('#shed').val()
                        $('#shed_quantity').val(0)

                        type_id = $('#animal_type').val();
                        livestock_list_id = $('#livestockList').val();

                        let $_this= $(this);
                        $.ajax({
                            type: "GET",
                            url: "livestock_shed_total",
                            dataType: "json",
                            data:{
                                shed: shed,
                                type_id: type_id,
                                livestock_list_id: livestock_list_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    $('#shed_quantity').val(response.reduce_shed_quantity);
                                }
                                else{
                                    $('#shed_quantity').val(0);
                                }
                            }
                        });
                        break;
                    default:
                        $('.selectpicka').select2({ placeholder: "SELECT LIVESTOCK(S)"}).next().hide();
                        $('.selectpicker').select2({ placeholder: "SELECT LIVESTOCK GROUP(S)" }).next().hide();
                        $("#group").hide()
                        $("#specific").hide()
                        $("#rand_livestock").hide();
                }

            });

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

                var groups = $('#specific_group').val();
                var shed = $('#shed').val()
                $('#shed_quantity').val(0)
                console.log(groups);

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


            });

            $('#cropList').on('change',function(){
                dropdown = $('#cropList');
                plant_name = dropdown.find("option:selected").text();
                crop_list_id = $(this).val();
                console.log(plant_name);
                console.log(crop_list_id);
                $('.selectpicker').select2({ placeholder: "SELECT PLANTATION(S)" }).next().hide();
                $("#group").hide()
                $('#specific_group')
                    .find('option')
                    .remove()
                    .end()
                $('#standard_unit').val('');
                $('#plantation_group').val('');
                $('#relative_unit').val('');
                $.ajax({
                    type: "POST",
                    url: "get_crop_inv",
                    dataType: "json",
                    data:{
                        crop_list_id: crop_list_id
                    },
                    success: function (response) {
                        $('#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>');
                        });
                        $('#crop_inventory')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE FERTILIZER</option>');
                        $.each(response.fertilizers,function(key,value){
                            $("#crop_inventory").append('<option value="'+value.id+'">'+value.inventory_name+'</option>');
                        });
                    }
                });
            });

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

                field_id = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "get_field_crop_plantations",
                    dataType: "json",
                    data:{
                        field_id: field_id,
                        crop_list_id: crop_list_id
                    },
                    success: function (response) {
                        $('#crop_specific_group')
                            .find('option')
                            .remove()
                            .end()
                        $.each(response.plantations,function(key,value){
                            $("#crop_specific_group").append('<option value="'+value.id+'">'+value.group_name+'</option>');
                        });
                    }
                });
            });

            $('#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) {
                        $('#eq_shed')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="0">CHOOSE ANIMAL HOUSE</option>');
                        $.each(response.sheds,function(key,value){
                            $("#eq_shed").append('<option value="'+value.id+'">'+value.shed_name+'</option>');
                        });
                        $('#eq_store')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE STORAGE HOUSE</option>');
                        $.each(response.storages,function(key,value){
                            $("#eq_store").append('<option value="'+value.id+'">'+value.store_name+'</option>');
                        });
                        $('#eq_field')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE PLANTING AREA</option>');
                        $.each(response.fields,function(key,value){
                            $("#eq_field").append('<option value="'+value.id+'">'+value.field_name+'</option>');
                        });
                    }
                });
            });

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

                livestock_inventory_id = $(this).val();
                console.log(livestock_inventory_id);
                $.ajax({
                    type: "POST",
                    url: "get_livestock_inv_var",
                    dataType: "json",
                    data:{
                        livestock_inventory_id: livestock_inventory_id
                    },
                    success: function (response) {
                        if(response.variety_count !== 0){
                            $('#inv_varieties').show()
                            $("#inventory_variety").attr("required", true);
                        }
                        else{
                            $('#inv_varieties').hide()
                            $("#inventory_variety").attr("required", false);
                        }
                        $('#inventory_variety')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE INVENTORY VARIETY</option>');
                        $.each(response.varieties,function(key,value){
                            $("#inventory_variety").append('<option value="'+value.id+'">'+value.variety_name+'</option>');
                        });
                    }
                });
            });

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

                crop_inventory_id = $(this).val();
                console.log(crop_inventory_id);
                $.ajax({
                    type: "POST",
                    url: "get_crop_inv_var",
                    dataType: "json",
                    data:{
                        crop_inventory_id: crop_inventory_id
                    },
                    success: function (response) {
                        if(response.variety_count !== 0){
                            $('#inv_varieties').show()
                            $("#inventory_variety").attr("required", true);
                        }
                        else{
                            $('#inv_varieties').hide()
                            $("#inventory_variety").attr("required", false);
                        }
                        $('#inventory_variety')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE INVENTORY VARIETY</option>');
                        $.each(response.varieties,function(key,value){
                            $("#inventory_variety").append('<option value="'+value.id+'">'+value.variety_name+'</option>');
                        });
                    }
                });
            });

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

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Asset Count will be added!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#addCountForm").ajaxSubmit({
                                type: "POST",
                                url: "inspect-and-count",
                                dataType: "json",
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Asset Count Added", "success");

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

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

                                    }
                                }
                            });
                        });

                }
            });

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

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Tag will be detached!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#detachTagForm").ajaxSubmit({
                                type: "POST",
                                url: "detach_tag",
                                dataType: "json",
                                data:{
                                    tag_Report_id: tag_Report_id
                                },
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Tag Detached", "success");

                                        location.reload();

                                    } 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_count", function (e) {

                countReport_id = $(this).data("id");
                console.log(countReport_id);
                swal({
                        title: "Are you sure?",
                        text: "Asset Count will be deleted!",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        $.ajax({
                            type: "DELETE",
                            url: "delete_count",
                            dataType: "json",
                            data:{
                                countReport_id: countReport_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    swal("Done!", "Asset Count 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