@extends('main')
@section('css')
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">

    <link rel="stylesheet"
          href="{{ url('/') }}/assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <!-- Bootstrap4 Duallistbox -->
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
    <!-- BS Stepper -->
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/bs-stepper/css/bs-stepper.min.css">
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">

    </section>


    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">

                    <div class="card card-primary card-outline">
                        <div class="card-header p-2">
                            <span class="show_add_form"></span>Villages
                            <button type="button" class="btn btn-success float-right click_toggle_button">Toggle Form</button>
                        </div>
                        <div class="card-body" style="display:none">
                            <form method="POST"  class="prevent-resubmit-form" id="add_edit_form"  enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <input type="hidden" id="find_id" name="id" >
                                <div class="row">
                                    <div class="form-group col-md-4 col-lg-4  ">
                                        <label for="exampleInputEmail1">Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="Name.."  required >
                                    </div>
                                    <div class="form-group col-md-4 col-lg-4  ">
                                        <label for="exampleInputEmail1">Country</label>
                                        <select style="width:100%;" class="form-control select2" id="country_id" name="country_id"  required>
                                            @foreach($vars['countries'] as $country)
                                                <option value="{{$country->id}}" {{$country->id == 212 ? 'selected':''}}>{{$country->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4 col-lg-4 ">
                                        <label for="exampleInputEmail1">Zonal</label>
                                        <select style="width:100%;" class="select2 form-control" id="zonal_id" name="zonal_id"  required>
                                            <option value="">Select Zonal</option>
                                            @foreach($vars['zonals'] as $zonal)
                                                <option value="{{$zonal->id}}">{{$zonal->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 col-lg-4  ">
                                        <label for="exampleInputEmail1">Region</label>
                                        <select style="width:100%;" class="select2 form-control select_district_from_region" id="region_id" name="region_id"  required>
                                            <option value="">Select Region</option>
                                            @foreach($vars['regions'] as $region)
                                                <option value="{{$region->id}}">{{$region->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 col-lg-4  ">
                                        <label for="exampleInputEmail1">District</label>
                                        <select style="width:100%;" class="select2 form-control select_ward_from_district" id="district_id" name="district_id"  required>
                                            <option value="">Select District</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 col-lg-4 ">
                                        <label for="exampleInputEmail1">Ward</label>
                                        <select style="width:100%;" class="select2 form-control" id="ward_id" name="ward_id"  required>
                                            <option value="">Select Ward</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="card-footer  px-lg-2">
                                    <button type="submit" class="btn btn-primary float-right prevent-resubmit-button">Submit</button>
                                </div>
                            </form>
                        </div>

                        <div class="card-body">

                            <table id="append_data_table" class="table table-bordered data-table table-striped">
                                <thead>
                                <tr>
                                    <th>Zone</th>
                                    <th>Regions</th>
                                    <th>District</th>
                                    <th>Ward</th>
                                    <th>Name</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($vars['villages'] as $row)
                                    @include('areas.villages._tr')
                                @endforeach
                                </tbody>

                            </table>

                        </div><!-- /.card-body -->

                    </div>

                </div>

                <!-- /.col -->
            </div>


            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>

@endsection



@section('js')

    <script src="{{ url('/') }}/assets/plugins/select2/js/select2.full.min.js"></script>
    <!-- Bootstrap4 Duallistbox -->
    <!-- DataTables  & Plugins -->
    <script src="{{ url('/') }}/assets/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/jszip/jszip.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <!-- AdminLTE App -->
    <script type="text/javascript">

        $(document).on('click', '.click_toggle_button', function (e) {
            e.preventDefault();
            $('#find_id').val('');
            document.getElementById('add_edit_form').reset();
            $('.card-body').toggle('slow');
            //console.log($(this).val())
        });

        $(document).on('click', '.editDataForm', function (e) {
            e.preventDefault();
            editForm($(this));
            let district = $(this).data('district');
            let ward = $(this).data('ward');
            $('#district_id').append(`<option value="${district.id}" selected>${district.name}</option>`);
            $('#ward_id').append(`<option value="${ward.id}" selected>${ward.name}</option>`);
            $('.card-body').toggle('slow');

        });

        $(document).on('change', '.select_district_from_region', function (e) {
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: `/get_districts_from_region/${$(this).val()}`,
                success: function (data) {
                    let district = $('#district_id').val();
                    $('#district_id').empty();
                    $('#district_id').append(`<option value="">Select District</option>` )
                    data.forEach((element)=>{ $('#district_id').append(`<option value="${element.id}" ${ element.id == district ? 'selected':'' } >${element.name}</option>` ); });
                },
            });
        });

        $(document).on('change', '.select_ward_from_district', function (e) {
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: `/select_ward_from_district/${$(this).val()}`,
                success: function (data) {
                    let ward_id = $('#ward_id').val();
                    $('#ward_id').empty();
                    $('#ward_id').append(`<option value="">Select Ward</option>` )
                    data.forEach((element)=>{ $('#ward_id').append(`<option value="${element.id}" ${ element.id == ward_id ? 'selected':'' }>${element.name}</option>` ); });
                },
            });
        });


        //submit  form
        $(document).on('submit', '#add_edit_form', function(e){
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            let id = $('#find_id').val();
            var formdata = new FormData(this);
            $.ajax({
                type: "POST",
                url: '/villages',
                processData: false,
                // cache: false,
                contentType: false,
                data: formdata,
                beforeSend: function () {
                    // run_waitMe('win8', 'add_edit_form', 'Saving Country');
                },
                complete: function () {
                    // $('#add_edit_form').waitMe("hide");
                },
                success: function (data) {
                    $('#find_id').val('');
                    document.getElementById('add_edit_form').reset();
                    if(id){
                        $(`#append_data_tr_${id}`).replaceWith(data);
                    }else{
                        $('#append_data_table').prepend(data);
                    }
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                },
                error: function (xhr, ajaxOptions, thrownError){
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    show_alert('danger', xhr.responseText);
                }
            });
        });

    </script>

@endsection