@extends('layouts.app')
@push('css')
@endpush
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <div class="d-inline p-2  text-dark" style="font-size: 26px;font-weight: bold">Institute Management</div>
                </div>
                <!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('home') }}" class="btn btn-sm btn-primary"><i class="fas fa-home"></i>
                                Home</a>
                        </div>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Main row -->
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-header">
                            Filters
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="zone">Zone</label>
                                        <select id="zone_id"
                                            class="js-example-basic-single form-control @error('zone_id') is-invalid @enderror"
                                            name="zone_id">
                                            <option value="">Select Zones</option>
                                            @foreach ($zones as $zone)
                                                <option value="{{ $zone->id }}">{{ $zone->zone_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('zone_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="selectDistrict">District Name</label>
                                        <select id="district_id"
                                            class="js-example-basic-single form-control @error('district_id') is-invalid @enderror"
                                            name="district_id"> </select>
                                        @error('district_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="upazila_id">Upazila Name</label>
                                        <select id="upazila_id"
                                            class="js-example-basic-single form-control @error('upazila_id') is-invalid @enderror"
                                            name="upazila_id">

                                        </select>
                                        @error('upazila_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <form action="{{ route('institute_management.getinstitutes') }}" method="POST"
                                    enctype="multipart/form-data" id="excel_form" class="form-inline">
                                    @csrf
                                    <button class="btn btn-success btn-sm" id="loaddata">
                                        <i class="fa fa-search" aria-hidden="true"></i>
                                        Load Data
                                    </button>
                                    @csrf
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row (main row) -->
            <span id="partial_view"></span>
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('select[name="zone_id"]').on('change', function() {
                var zone_id = $(this).val();
                if (zone_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/zone/district/' + zone_id,
                        type: "GET",
                        dataType: "json",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        success: function(data) {
                            var res = '<option value="">Select District</option>';
                            $.each(data.district, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .district_name + '</option>';
                            });
                            $('select[name="district_id"]').html(res);
                        },
                        error: function(data) {
                            Swal.fire(
                                'Cancelled',
                                'Error occured. Please contact administrator!',
                                'error'
                            );
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                }
            });
            $('select[name="district_id"]').on('change', function() {
                var district_id = $(this).val();
                if (district_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/division/district/upazila/' + district_id,
                        type: "GET",
                        dataType: "json",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        success: function(data) {
                            var res = '<option value="">Select Upazila</option>';
                            $.each(data.upazila, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .upazila_name + '</option>';
                            });
                            $('select[name="upazila_id"]').html(res);
                        },
                        error: function(data) {
                            Swal.fire(
                                'Cancelled',
                                'Error occured. Please contact administrator!',
                                'error'
                            );
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                }
            });
        });
        $("#loaddata").click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "{{ route('institute_management.getinstitutes') }}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    "zoneId": $('#zone_id').find(":selected").val(),
                    "districtId": $('#district_id').find(":selected").val(),
                    "upazilaId": $('#upazila_id').find(":selected").val(),
                },
                beforeSend: function() {
                    $('#wait').show();
                },
                success: (data) => {
                    $("#partial_view").empty();
                    $("#partial_view").append(data);
                },
                error: function(data) {
                    // console.log(data);
                    Swal.fire({
                        title: '<strong>Sorry, data could not be loaded!</strong>',
                        type: 'error',
                        html: 'Problem: Please resolve the problem and try again!',
                        showCloseButton: true
                    });
                },
                complete: function() {
                    $('#wait').hide();
                }
            });
        });
    </script>
@endpush