@extends('admin.layouts.app')

@section('title', 'Region')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-outline-info">
                <div class="card-header">
                    <h4 class="card-title">{{ __('Region') }}</h4>

                </div>
                <div class="card-body p-4">

                            <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Edit Region</h4>
                                    </div>
                                    <div class="card-body">
                                    <form method="POST" action="{{ route('region.update', [$region->id]) }}">
                                    @csrf
                                    @method('PUT')
                                            <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Region</label>
                                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name', isset($region) ? $region->name : '') }}" required autocomplete="name" autofocus>
                                @include('admin.partials.form-errors', array('field' => 'name'))

                                                <label class="form-label" for="formrow-territory-input">Territory</label>
                                                <div class="form-group">
                                                    <select multiple="multiple" name="territory[]" id="territory">
                                                    @foreach ($territories as $territory)
                                                        <option selected value="{{$territory->id}}">{{$territory->name}}</option>
                                                    @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="mt-4">
                                                <button type="submit" class="btn btn-primary w-md">Update</button>
                                            </div>
                                    </form>
                                    </div>
                                </div>
                            </div>
                            <!-- end col -->
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Regions</h4>

                                    </div>
                                    <div class="card-body">


                                    <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <!-- <th>Actions</th> -->



                                            </tr>
                                            </thead>


                                            <tbody>
                                            @foreach($regions as $c)
                                            <tr>
                                                <td>{{$c->name}}</td>
                                               <!--  <td>
                                                <form method="POST" action="{{ route('region.destroy', $c->id) }}" >                                                    {{ csrf_field() }}
                                                    {{ method_field('DELETE') }}

                                                <a href="{{ route('region.edit', $c->id) }}" class="edit btn btn-success btn-sm">{{__('Edit')}}</a>
                                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                                </form>
                                                </td> -->
                                            </tr>
                                            @endforeach

                                            </tbody>
                                        </table>



                                    </div>
                                </div>
                            </div>
                            <!-- end col -->
                        </div>
                </div>
            </div>
        </div>
    </div>
<!-- JAVASCRIPT -->
        <script src="{{url('/')}}/assets/libs/jquery/jquery.min.js"></script>
        <script src="{{url('/')}}/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="{{url('/')}}/assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="{{url('/')}}/assets/libs/simplebar/simplebar.min.js"></script>
        <script src="{{url('/')}}/assets/libs/node-waves/waves.min.js"></script>
        <script src="{{url('/')}}/assets/libs/feather-icons/feather.min.js"></script>
        <!-- pace js -->
        <script src="{{url('/')}}/assets/libs/pace-js/pace.min.js"></script>

        <!-- apexcharts -->
        <script src="{{url('/')}}/assets/libs/apexcharts/apexcharts.min.js"></script>

        <!-- Plugins js-->
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js"></script>
        <!-- dashboard init -->
        <script src="{{url('/')}}/assets/js/pages/dashboard.init.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script src="{{url('/')}}/assets/js/app.js"></script>
        <script>
            var territory=$("#territory");
           territory.select2({
            placeholder: 'Select territory',
            minimumInputLength: 1,
            templateResult:function(data){
                  return $(`<div class="dtc-template">
                     <div>${data.text}</div>
                   </div>`)
                   },
            ajax: {
                 url: '{{url('/')}}'+'/territory/available',
                 dataType:'json',
                'headers': {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                 processResults: function (data) {
                    return {
                        results: data
                    };
                },
                data: function (params) {
                var query = {
                    search: params.term
                }


                return query;
                }

            }
      });


        </script>
@endsection