@extends('Dashboard.layouts.app')
@section('style')
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@endsection
@section('search')
    <!-- App Search-->
    <form class="app-search d-none d-md-block" action="{{ route('township.create') }}" method="get">
        <div class="position-relative">
            <input type="text" name="keyword" class="form-control" placeholder="Search..." autocomplete="off"
                   id="search-options" value="{{ request()->keyword ?? '' }}">
            <span class="mdi mdi-magnify search-widget-icon"></span>
            <span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none"
                  id="search-close-options">
            </span>
        </div>
    </form>
@endsection
@section('township_active','active')
@section('main_content')

    <div class="page-content" data-aos="fade-up ">
        <div class="container-fluid" >
            <div class="col-xxl-12">
                <div class="card">
                    <div class="card-header align-items-center d-flex" data-aos="fade-up">
                        <h4 class="card-title mb-0 flex-grow-1"  >Township List</h4>
                        <div class="flex-shrink-0">

                            <!-- Default Modals -->
                            <button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#myModal">Create Township</button>
                            <div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                                <div class="modal-dialog ">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="myModalLabel">Create Delivery Roads</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                                        </div>
                                        <div class="modal-body">
                                            <form action="{{ route('township.store') }}" id="deliveryStore" method="post" >
                                                @csrf
                                                <div class="mb-3 ">
                                                    <label for="basiInput" class="form-label">Name</label>
                                                    <select name="region" class="form-select" id="region">
                                                        <option value="" selected disabled>--select region--</option>
                                                        @forelse($regions as $region)
                                                            <option value="{{ $region->id }}">{{ $region->name }}</option>
                                                        @empty
                                                        @endforelse
                                                    </select>
                                                </div>

                                                <div class="mb-3 ">
                                                    <label for="basiInput" class="form-label">Name</label>
                                                    <input type="text" name="township" class="form-control">
                                                </div>

                                                <div class="text-end mt-3 ">
                                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                                    <button  class="btn btn-primary ">Save</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                        </div>
                    </div><!-- end card header -->

                    <div class="card-body" >
                        <div class="table-responsive table-card">
                            <table
                                class="table table-borderless table-centered align-middle table-nowrap mb-0">
                                <thead class="text-muted table-light">
                                <tr>
                                    <th scope="col"> ID</th>
{{--                                    <th scope="col">Region Delete</th>--}}
                                    <th scope="col">Region</th>
                                    <th scope="col">City</th>
                                    <th scope="col">Township Action</th>
                                    <th scope="col">Created At</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($townships as $key=>$township)
                                    <tr >
                                        <td>{{ ($townships->currentPage() - 1) * $townships->perPage() + $key + 1 }}</td>
                                        <td >{{ $township->region->name }}</td>
                                        <td >{{ $township->name }}</td>
                                        {{-- <td class="text-end"> {{ $township->fees }} Ks</td>
                                        <td> <span class="  {{ $township->COD == 0 ? 'text-danger' : 'text-success' }}">{{ $township->COD == 0 ? 'NO' : 'YES' }}</span> </td>
                                        <td> <span class=" ">{{ $township->duration }}</span> </td>
                                        <td> <span class=" ">{{ $township->remark }}</span> </td> --}}
                                        <td>
                                            @include('Dashboard.Township.edit')
                                            <button class="btn btn-danger btn-sm " onclick="confirmDeleteTownship('{{ $township->name }}','{{ $township->id }}')">
                                                <i class='bx bx-trash'></i>
                                            </button>
                                            <form action="{{ route('township.destroy',$township->id) }}" id="townshipDel{{ $township->id }}" method="post">
                                                @csrf @method("DELETE")
                                            </form>

                                        </td>
                                        <td>{{ $township->created_at->diffForHumans() }}</td>
                                    </tr>
                                @empty
                                    <tr class="text-center">
                                        <td colspan="10">
                                            <img src="{{ asset('assets/images/nodata.webp') }}" width="300" alt="">
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody><!-- end tbody -->
                            </table><!-- end table -->

                            <div class="mt-3 d-flex justify-content-end me-3 ">
                                {{ $townships->links() }}
                            </div>
                        </div>
                    </div>
                </div> <!-- .card-->
            </div>
        </div>
        <!-- container-fluid -->
    </div>

@endsection

@section('script')

    {!! JsValidator::formRequest('App\Http\Requests\UpdateRegionRequest') !!}

    {!! JsValidator::formRequest('App\Http\Requests\StoreRegionRequest','#deliveryStore') !!}
    <script>

        {{--let data = @json($json);--}}

        {{--window.addEventListener("load",function (){--}}
        {{--   addRegion('region');--}}
        {{--});--}}

        {{--function addTownship(state,id)--}}
        {{--{--}}
        {{--    console.log( data.filter(el => el.state == state)[0]);--}}
        {{--    document.getElementById(id).innerHTML = '<option disabled readonly="">-- select option --</option>';--}}
        {{--    data.filter(el => el.state == state)[0].township.map(el => {--}}
        {{--        console.log(el);--}}
        {{--        document.getElementById(id).innerHTML +=  `<option value="${ el.township }"> ${el.township }</option>`--}}
        {{--        // el.town.map(el => {--}}
        {{--        //     document.getElementById(id).innerHTML +=  `<option value="${ el}"> ${el}</option>`--}}
        {{--        // })--}}
        {{--    })--}}
        {{--}--}}

        {{--function addRegion(id){--}}
        {{--    data.map(el => {--}}
        {{--        document.getElementById(id).innerHTML += `<option value="${ el.state}"> ${el.state}</option>`--}}
        {{--    })--}}
        {{--}--}}

        function submitEditForm(id)
        {
            document.getElementById(id).submit();
        }

        function chageImg(id)
        {
            let preview = document.getElementById('previewImg'+id);
            let file = document.getElementById('photo'+id).files[0];
            let reader = new FileReader();

            reader.addEventListener("load",function (){
                preview.src = reader.result;
            })

            if(file){
                reader.readAsDataURL(file);
            }
            console.log(file);
            console.log(preview);
        }


        function confirm(value,id){
            Swal.fire({
                title: "Are you sure?",
                text: ` ${value} region and his townships will be delete!`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
                cancelButtonClass: "btn btn-danger w-xs mt-2",
                buttonsStyling: !1,
                showCloseButton: !0,
            }).then(function (t) {
                t.value
                    ?
                    document.getElementById('catDel'+id).submit()

                    : t.dismiss === Swal.DismissReason.cancel &&
                    Swal.fire({
                        title: "Cancelled",
                        text: "Your imaginary file is safe",
                        icon: "success",
                        confirmButtonClass: "btn btn-primary mt-2",
                        buttonsStyling: !1,
                    });
            });
        }
        function confirmDeleteTownship(value,id){
            Swal.fire({
                title: "Are you sure?",
                text: ` ${value} township will be delete!`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
                cancelButtonClass: "btn btn-danger w-xs mt-2",
                buttonsStyling: !1,
                showCloseButton: !0,
            }).then(function (t) {
                t.value
                    ?
                    document.getElementById('townshipDel'+id).submit()

                    : t.dismiss === Swal.DismissReason.cancel &&
                    Swal.fire({
                        title: "Cancelled",
                        text: "Your imaginary file is safe",
                        icon: "success",
                        confirmButtonClass: "btn btn-primary mt-2",
                        buttonsStyling: !1,
                    });
            });
        }

    </script>

@endsection