@extends('main')
@section('css')
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/daterangepicker/daterangepicker.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <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 Countries
                        </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">Code</label>
                                    <input type="text" name="code" class="form-control" placeholder=" Code.."  >
                                </div>

                                <div class="card-footer  px-lg-2">
                                    <button type="submit" class="btn bg-orange 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 Country
                        </div><!-- /.card-header -->
                        <div class="card-body">
                            <table id="append_data_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Country</th>
                                    <th>Code</th>
                                    <th style="width:15%">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($vars['countries'] as $row)
                                    @include('areas.countries._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 -->
    <script src="{{ url('/') }}/assets/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
    <!-- InputMask -->
    <script src="{{ url('/') }}/assets/plugins/moment/moment.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/inputmask/jquery.inputmask.min.js"></script>
    <!-- date-range-picker -->
    <script src="{{ url('/') }}/assets/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- bootstrap color picker -->
    <script src="{{ url('/') }}/assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{ url('/') }}/assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <!-- Bootstrap Switch -->
    <script src="{{ url('/') }}/assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <!-- BS-Stepper -->
    <script src="{{ url('/') }}/assets/plugins/bs-stepper/js/bs-stepper.min.js"></script>
    <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: '/countries',
                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