@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 Districts
                        </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="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 Districts
                        </div><!-- /.card-header -->
                        <div class="card-body">
                            <table id="append_data_table" class="table table-bordered data-table table-striped">
                                <thead>
                                <tr>
                                    <th>Country</th>
                                    <th>Zone</th>
                                    <th>Regions</th>
                                    <th>Name</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($vars['districts'] as $row)
                                    <tr id="append_data_table_district_{{$row->id}}">
                                            <td>@isset($row->country){{$row->country->name}}@endisset</td>
                                            <td>@isset($row->zonal){{$row->zonal->name}}@endisset</td>
                                        <td>@isset($row->region){{$row->region->name}}@endisset</td>
                                        <td>{{$row->name}}</td>
                                        <td>
                                            <div class="flex justify-center">
                                                <a class="flex items-center m-3 editForm" data-row="{{$row}}" data-form="add_edit_form"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" icon-name="check-square" data-lucide="check-square" class="lucide lucide-check-square w-4 h-4 mr-1"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path></svg> </a>
                                                <a class="flex items-center text-danger deleteThis" data-id="{{$row->id}}" data-table="districts"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" icon-name="trash-2" data-lucide="trash-2" class="lucide lucide-trash-2 w-4 h-4 mr-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg> </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div><!-- /.card-body -->
                    </div>
                    <!-- /.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('change', '.select_district_from_region', function (e) {
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: `/get_districts_from_region/${$(this).val()}`,
                success: function (data) {
                    $('#district_id').empty();
                    $('#district_id').append(`<option value="">Select District</option>` )
                    data.forEach((element)=>{ $('#district_id').append(`<option value="${element.id}">${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) {
                    $('#ward_id').empty();
                    $('#ward_id').append(`<option value="">Select Ward</option>` )
                    data.forEach((element)=>{ $('#ward_id').append(`<option value="${element.id}">${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: '/districts',
                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