@extends('backend.layouts.app')
@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-6 card-title"><h4>{{$page_title}} LIST</h4></div>
                            <div class="col-6 text-end">
                                <form action="{{route('village.index')}}" method="GET">
                                    <div class="input-group">
                                        <input type="text" name="search" class="form-control form-control-sm" placeholder="Search" value="@isset($search){{$search}}@endisset" data-input>
                                        <button type="submit" class="input-group-text input-group-addon" data-toggle><i data-feather="search"></i></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        {{-- <th>Country</th>
                                        <th>State</th>
                                        <th>District</th>
                                        <th>Block</th> --}}
                                        <th>Gram Panchayat</th>
                                        <th>Name</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $i= 1;
                                    @endphp
                                    @forelse ($list as $key=> $data)
                                        <tr>
                                            <td>{{($key+1) + ($list->currentPage() - 1)*$list->perPage()}}</td>
                                            {{-- <td>{{$data->country->name}}</td>
                                            <td>{{$data->state->name}}</td>
                                            <td>{{$data->district->name}}</td>
                                            <td>{{$data->block->name}}</td> --}}
                                            <td>
                                                {{$data->gramPanchayat->name}} <br>
                                                ({{$data->block->name}}, {{$data->district->name}})
                                            </td>
                                            <td>{{$data->name}}</td>
                                            <td>
                                                <x-edit-btn route="{{ route('village.edit', $data->id) }}" />
                                                {{-- <x-delete-btn route="{{ route('village.destroy', $data->id) }}" /> --}}
                                            </td>
                                        </tr>
                                    @empty

                                        <tr>
                                            <td colspan="10" class="text-center text-danger">
                                                <i class="link-icon" data-feather="frown" style="width: 50px; height:50px;"></i><br>
                                                Opps!! There Are No Data Found..
                                            </td>
                                        </tr>

                                    @endforelse
                                </tbody>
                            </table>
                            <div class="mt-2">
                                {{ $list->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        @isset($edit_data)
                            <h6 class="card-title">Update {{$page_title}}</h6>
                            <form id="valid_form" method="POST" action="{{route('village.update',$edit_data->id)}}" enctype="multipart/form-data">
                            @method('PUT')
                        @else
                            <h6 class="card-title">Create {{$page_title}}</h6>
                            <form id="valid_form" method="POST" action="{{route('village.store')}}" enctype="multipart/form-data">
                        @endisset
                            @csrf
                            <div class="mb-3">
                                <label for="country_id" class="form-label">Country</label>
                                <select class="form-control js-example-basic-single" name="country_id" id="country_id" onchange="getStateByCountry()" required>
                                    <option value="" selected disabled>Select Country</option>
                                    @foreach ($country_list as $country_data)
                                        <option value="{{$country_data->id}}" @if(isset($edit_data) && $country_data->id == $edit_data->country_id) selected @endif>{{$country_data->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="state_id" class="form-label">State</label>
                                <select class="form-control js-example-basic-single" name="state_id" id="state_id" onchange="getDistrictByState()" required>
                                    <option value="" selected disabled>Select State</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="district_id" class="form-label">District</label>
                                <select class="form-control js-example-basic-single" name="district_id" id="district_id" onchange="getBlockByDistrict()" required>
                                    <option value="" selected disabled>Select District</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="block_id" class="form-label">Block</label>
                                <select class="form-control js-example-basic-single" name="block_id" id="block_id" onchange="getGramPanchayatByBlock()" required>
                                    <option value="" selected disabled>Select Block</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="gram_panchayat_id" class="form-label">Gram Panchayat</label>
                                <select class="form-control js-example-basic-single" name="gram_panchayat_id" id="gram_panchayat_id" required>
                                    <option value="" selected disabled>Select Gram Panchayat</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input id="name" class="form-control" type="text" name="name" @isset($edit_data)value="{{$edit_data->name}}" @endisset required placeholder="Enter State Name">
                            </div>

                            @isset($edit_data) <x-save-btn text="Update" /> @else <x-save-btn text="Save" /> @endisset
                            @isset($edit_data)
                                <x-cancle-btn text="Cancel" route="{{route('village.index')}}" />
                            @endisset
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        @isset($edit_data)
            getStateByCountry();
        @endisset
        function getStateByCountry(){
            var selected_state_id = "";
            @isset($edit_data)
                selected_state_id = "{{$edit_data->state_id}}";
            @endisset
            $('#state_id').empty();
            var countryId = $('#country_id').val();
            $.get("{{ route('getStateByCountry', '') }}/"+countryId, function(data){
                $('#state_id').append("<option value='' selected disabled>Select State</option>");
                $.each(data, function(key,val) {
                    if(selected_state_id==val.id){
                        $('#state_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                    }else{
                        $('#state_id').append("<option value="+val.id+" >"+val.name+"</option>");
                    }
                });
                getDistrictByState();
            });
        }

        function getDistrictByState(){
            var selected_district_id = "";
            @isset($edit_data)
                selected_district_id = "{{$edit_data->district_id}}";
            @endisset
            $('#district_id').empty();
            var stateId = $('#state_id').val();
            $.get("{{ route('getDistrictByState', '') }}/"+stateId, function(data){
                $('#district_id').append("<option value='' selected disabled>Select District</option>");
                $.each(data, function(key,val) {
                    if(selected_district_id==val.id){
                        $('#district_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                    }else{
                        $('#district_id').append("<option value="+val.id+" >"+val.name+"</option>");
                    }
                });
                getBlockByDistrict();
            });
        }

        function getBlockByDistrict(){
            var selected_block_id = "";
            @isset($edit_data)
                selected_block_id = "{{$edit_data->block_id}}";
            @endisset
            $('#block_id').empty();
            var districtId = $('#district_id').val();
            $.get("{{ route('getBlockByDistrict', '') }}/"+districtId, function(data){
                $('#block_id').append("<option value='' selected disabled>Select Block</option>");
                $.each(data, function(key,val) {
                    if(selected_block_id==val.id){
                        $('#block_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                    }else{
                        $('#block_id').append("<option value="+val.id+" >"+val.name+"</option>");
                    }
                });
                getGramPanchayatByBlock();
            });
        }

        function getGramPanchayatByBlock(){
            var gram_panchayat_id = "";
            @isset($edit_data)
                gram_panchayat_id = "{{$edit_data->gram_panchayat_id}}";
            @endisset
            $('#gram_panchayat_id').empty();
            var blockId = $('#block_id').val();
            $.get("{{ route('getGramPanchayatByBlock', '') }}/"+blockId, function(data){

                $('#gram_panchayat_id').append("<option value='' selected disabled>Select Gram Panchayat</option>");
                $.each(data, function(key,val) {
                    if(gram_panchayat_id==val.id){
                        $('#gram_panchayat_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                    }else{
                        $('#gram_panchayat_id').append("<option value="+val.id+" >"+val.name+"</option>");
                    }
                });
            });
        }
    </script>
@endsection