@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">
        <h1>

        </h1>
    </section>


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

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

                    <div class="card card-primary card-outline">
                        <div class="card-header p-2">
                        Please Add Wards
                        </div>
                        <div class="card-body">
                            <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="form-group ">
                                    <label for="exampleInputEmail1">Name</label>
                                    <input type="text" name="name" class="form-control" placeholder="Name.."  required >
                                </div>
                                <div class="form-group ">
                                    <label for="exampleInputEmail1">Country</label>
                                    <select style="width:100%;" class="form-control select2" id="country_id" name="country_id"  required>
                                        <option value="">Select Country</option>
                                        @foreach($vars['countries'] as $country)
                                            <option value="{{$country->id}}" {{$country->id == 212 ? 'selected':''}}>{{$country->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <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 ">
                                    <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 ">
                                    <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="card-footer  px-lg-2">
                                    <button type="submit" class="btn btn-primary float-right prevent-resubmit-button">Submit</button>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>
                <!-- /.col -->
                <div class="col-md-8">
                    <div class="card card-primary card-outline">
                        <div class="card-header p-2">
                        List Of Wards
                        </div><!-- /.card-header -->
                        <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>Name</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($vars['wards'] as $row)
                                    @include('areas.wards._tr')
                                @endforeach
                                </tbody>
                            </table>

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

                    </div>
{{--                {{ $vars['wards']->links() }}--}}
                    <!-- /.card -->
                </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', '.editDataForm', function (e) {
            e.preventDefault();
            editForm($(this));
            let district = $(this).data('district');
            // $(`#add_edit_form select[name=district_id]`).val(district.id);
            // $(`#add_edit_form select[name=district_id]`).text(district.name);
            $('#district_id').append(`<option value="${district.id}" selected>${district.name}</option>`);

        });

        $(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: '/wards',
                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