@extends('layouts.admin')
@section('title','GIMS')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css') }}">
<style>
    .button {
        background-color: #2C5F2D;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .button:hover {
        background-color: #97BC62FF;
    }

    .buttond {
        background-color: #db1709;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .buttond:hover {
        background-color: #e68524;
    }

    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
        border-color: #80d8ff;
    }
</style>

@endsection
@section('script')
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>

<script>
    $('#agency_type_id_id').change(function() {
        var agency_type_id = $(this).val();
        var default_html = "<option value='' selected>-- Select Any one --</option>";
        $('#dept_dzo_id').html(default_html);
        $('#division_id').html(default_html);
        $('#field_regional_id').html(default_html);

        $.ajax({
            url: "{{ route('get-agency')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                agen_typ_id: agency_type_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                $('#agency_title').html(response.data.agency_type + ": ");

                var agency_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data.agencies, function(key, value) {
                        agency_html += "<option value='" + value.id + "'>" + value.agency_name + "</option>";
                    });
                    $('#agency_id').html(agency_html);
                }
            }
        });
    });

    $('#agency_id').change(function() {
        var agency_id = $(this).val();
        var default_html = "<option value='' selected>-- Select Any one --</option>";
        $('#division_id').html(default_html);
        $('#field_regional_id').html(default_html);

        $.ajax({
            url: "{{ route('get-department')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                agen_id: agency_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                // $('#agency_title').html(response.data.agency_type+": ");

                var dept_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data.departments, function(key, value) {
                        dept_html += "<option value='" + value.id + "'>" + value.dept_dzo_name + "</option>";
                    });
                    $('#dept_dzo_id').html(dept_html);
                }
            }
        });
    });

    $('#dept_dzo_id').change(function() {
        var dept_id = $(this).val();
        var default_html = "<option value='' selected>-- Select Any one --</option>";
        $('#field_regional_id').html(default_html);

        $.ajax({
            url: "{{ route('get-division')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                dept_id: dept_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                // $('#agency_title').html(response.data.agency_type+": ");

                var division_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data.division, function(key, value) {
                        division_html += "<option value='" + value.id + "'>" + value.division_name + "</option>";
                    });
                    $('#division_id').html(division_html);
                }
            }
        });
    });

    $('#division_id').change(function() {
        var div_id = $(this).val();

        $.ajax({
            url: "{{ route('get-field-regional')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                div_id: div_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                // $('#agency_title').html(response.data.agency_type+": ");

                var field_regional_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data.field_regionals, function(key, value) {
                        field_regional_html += "<option value='" + value.id + "'>" + value.field_regional_name + "</option>";
                    });
                    $('#field_regional_id').html(field_regional_html);
                }
            }
        });
    });



    $('#fetchdetail').click(function(e) {
        
        e.preventDefault(); // do not submit form

        var agency_type_id = $('#agency_type_id_id').val();
        var agency_id = $('#agency_id').val();
        var dept_dzo_id = $('#dept_dzo_id').val();
        var division_id = $('#division_id').val();
        var field_regional_id = $('#field_regional_id').val();


        $.ajax({
            url: "{{ route('deleteequipment-record') }}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                agency_type_id: agency_type_id,
                agency_id: agency_id,
                dept_dzo_id: dept_dzo_id,
                division_id: division_id,
                field_regional_id: field_regional_id,

            },
            success: function(response) {

                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                if (response.data) {
                    var html_body = "";

                    $.each(response.data, function(key, value) {
                        html_body += "<tr>";
                        html_body += "<td>"


                        html_body += "<input type='hidden' name='_token' value='{{ csrf_token() }}'>";



                        html_body += "<input type='checkbox' class='checkbox' data-id='" + value.identification_code + "'>";

                        html_body += "</td>"

                        html_body += "<td>" + value.identification_code + "</td>";
                        html_body += "<td>" + value.asset_category.asset_category_name + "</td>";
                        html_body += "<td>" + value.asset_sub_category.asset_sub_category_name + "</td>";
                        html_body += "<td>" + value.asset_name.asset_name + "</td>";
                        html_body += "<td>" + value.cost + "</td>";
                        html_body += "<td>" + value.remarks + "</td>";

                        html_body += "</tr>";
                    });

                    $('#equip3-table').html(html_body);
                    $('.listasset').dataTable();
                    $('#hiderecord').removeClass('d-none');
                    $('.listasset').dataTable().removeClass;
                }
            }
        });
    });



    $(document).ready(function() {

        $('#check_all').on('click', function(e) {
            if ($(this).is(':checked', true)) {
                $(".checkbox").prop('checked', true);
            } else {
                $(".checkbox").prop('checked', false);
            }
        });

        $('.checkbox').on('click', function() {
            if ($('.checkbox:checked').length == $('.checkbox').length) {
                $('#check_all').prop('checked', true);
            } else {
                $('#check_all').prop('checked', false);
            }
        });

        $('.delete-all').on('click', function(e) {
            var idsArr = [];
            $(".checkbox:checked").each(function() {
                idsArr.push($(this).attr('data-id'));
            });


            if (idsArr.length <= 0) {
                alert("Please select atleast one record to delete.");
            } else {

                if (confirm("Are you sure, you want to delete this Record?")) {

                    var strIds = idsArr.join(",");

                    $.ajax({
                        url: "{{ route('tdelete-equipment-detail') }}",
                        type: 'post',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: 'ids=' + strIds,
                        success: function(data) {
                            if (data['status'] == true) {
                                $(".checkbox:checked").each(function() {
                                    $(this).parents("tr").remove();
                                });
                                alert('Deleted Sucessfully');
                            } else {
                                alert('Whoops Something went wrong!!');
                            }
                        },
                        error: function(data) {
                            alert(data.responseText);
                        }
                    });


                }
            }
        });

        $('[data-toggle=confirmation]').confirmation({
            rootSelector: '[data-toggle=confirmation]',
            onConfirm: function(event, element) {
                element.closest('form').submit();
            }
        });

    });
</script>
@endsection
@section('content')



<div class="page-content fade-in-up">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">Filter Options</div>

                </div>
                <div class="ibox-body">
                    <div class="form-group row">
                        <div class="col-1"></div>
                        {{ Form::label('agency_type','Agency Type: ',['class'=>'col-sm-2']) }}
                        <div class="col-sm-3">
                            {{ Form::select('agency_type_id', $agency_type_data, '',['class'=>'form-control form-control-sm','id'=>'agency_type_id_id','required'=>true,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                        {{ Form::label('agency','Agency: ',['class'=>'col-sm-2','id'=>'agency_title']) }}
                        <div class="col-sm-3">
                            {{ Form::select('agency_id', [], '',['class'=>'form-control form-control-sm','id'=>'agency_id','required'=>true,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-1"></div>
                        {{ Form::label('dept_dzo_id','Department: ',['class'=>'col-sm-2']) }}
                        <div class="col-sm-3">
                            {{ Form::select('dept_dzo_id', [], '',['class'=>'form-control form-control-sm','id'=>'dept_dzo_id','required'=>false,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                        {{ Form::label('division_id','Division: ',['class'=>'col-sm-2']) }}
                        <div class="col-sm-3">
                            {{ Form::select('division_id', [], '',['class'=>'form-control form-control-sm','id'=>'division_id','required'=>false,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-1"></div>
                        {{ Form::label('field_regional_id','Field/Regional: ',['class'=>'col-sm-2']) }}
                        <div class="col-sm-3">
                            {{ Form::select('field_regional_id', [], '',['class'=>'form-control form-control-sm','id'=>'field_regional_id','required'=>false,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-6 offset-6">
                            <div class="row">
                                <div class="col-3">{{ Form::button("<i class='fa fa-eye'></i> View",['class'=>'btn button', 'type'=>'button', 'id'=>'fetchdetail']) }}</div>

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

    </div>
</div>



<div class="d-none" id="hiderecord">
    <div class="page-content fade-in-up">

        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-head">
                        <div class="ibox-title">Current Land List</div>


                    </div>
                    <div class="ibox-body">
                        <form action="" id="allocate_form">
                            <table id="example" class="listasset table-striped table-hover">
                                <thead class="thead-dark">
                                    <th><input type="checkbox" id="check_all"></th>
                                    <th>Identification Code</th>
                                    <th>Asset Category</th>
                                    <th>Asset Sub Category</th>
                                    <th>Asset Name</th>
                                    <th>Price</th>
                                    <th>Remarks</th>
                                </thead>
                                <tbody id="equip3-table">

                                </tbody>
                            </table>
                        </form>
                        <div class="form-group row">
                            <div class="offset-sm-5">
                                <button class="btn btn-danger delete-all" type="button" id="delete-all">
                                    <i class="fa fa-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection