@extends('admin.layouts.master')
@section('title', 'Add School')
@section('content')

<!-- Start: Body-Content -->
<div class="body-content">
    <!-- mobile title -->
    <h1 class="page-title-sm">@yield('title')</h1>

    <div class="border-bottom row mb-3">
        <div class="col-sm-10">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('dashboard') }}">{{__('Label.Dashboard')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('school') }}">School</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                   Add School
                </li>
            </ol>
        </div>
        <div class="col-sm-2 d-flex align-items-center">
            <a href="{{ route('school') }}" class="btn btn-default mw-120"
                style="margin-top:-14px">School</a>
        </div>
    </div>

    <div class="card custom-border-card mt-3">
        <form enctype="multipart/form-data" id="save_school">
            {!! csrf_field() !!}
            <div class="form-row">
                <div class="col-md-6 offset-md-2">
                <div class="form-group mb-3">

                    <select  id="country-dropdown" name="county_id" class="form-control">

                        <option value="" >-- Select Country --</option>

                        @foreach ($countries as $data)

                        <option value="{{$data->CountryCode}}">

                            {{$data->CountryName}}

                        </option>

                        @endforeach

                    </select>

                </div>
            </div>
                <div class="col-md-6 offset-md-2">
                <div class="form-group mb-3">

                    <select id="state-dropdown" name="state_id" class="form-control">

                    </select>

                </div>
                </div>
                <div class="col-md-6 offset-md-2">
                <div class="form-group">

                    <select id="city-dropdown" name="LGA_id" class="form-control">

                    </select>

                </div>
                </div>
                <div class="col-md-6 offset-md-2">
                    <div class="form-group">
                        <label for="schoolName">Enter School Name</label>
                        <input name="schoolName" type="text" class="form-control" id="schoolName"
                            placeholder="Enter school Name">
                    </div>
                </div>
            </div>

            <div class="border-top pt-3">
                <button type="button" class="btn btn-default mw-120"
                    onclick="save_school()">{{__('Label.SAVE')}}</button>
                <a href="{{route('school')}}" class="btn btn-cancel mw-120 ml-2">{{__('Label.CANCEL')}}</a>
            </div>
        </form>
    </div>
</div>
<!-- End: Body-Content -->
</div>
<!-- End: Right Contenct -->
@endsection

@push('scripts')
<script type="text/javascript">
    function save_school() {
        $("#dvloader").show();
        var formData = new FormData($("#save_school")[0]);
        $.ajax({
            type: 'POST',
            url: '{{ route("schoolSave") }}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(resp) {
                $("#dvloader").hide();
                get_responce_message(resp, 'save_school', '{{ route("school") }}');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $("#dvloader").hide();
                toastr.error(errorThrown.msg, 'failed');
            }
        });
    }

    $(document).ready(function () {

  

/*------------------------------------------

--------------------------------------------

Country Dropdown Change Event

--------------------------------------------

--------------------------------------------*/

$('#country-dropdown').on('change', function () {

    var idCountry = this.value;

    $("#state-dropdown").html('');

    $.ajax({

        url: "{{ route("fetchstates") }}",

        type: "POST",

        data: {

            country_id: idCountry,

            _token: '{{csrf_token()}}'

        },

        dataType: 'json',

        success: function (result) {
         

            $('#state-dropdown').html('<option value="">-- Select State --</option>');

            $.each(result.states, function (key, value) {

                $("#state-dropdown").append('<option value="' + value

                    .id + '">' + value.StateRegion + '</option>');

            });

            $('#city-dropdown').html('<option value="">-- Select LGA --</option>');

        }

    });

});



/*------------------------------------------

--------------------------------------------

State Dropdown Change Event

--------------------------------------------

--------------------------------------------*/

$('#state-dropdown').on('change', function () {

    var idState = this.value;


    $("#city-dropdown").html('');

    $.ajax({

        url: "{{ route('fetchcities') }}",

        type: "POST",

        data: {

            statesregiontbls_id: idState,

            _token: '{{csrf_token()}}'

        },

        dataType: 'json',

        success: function (res) {
          
            console.log(res);
            $('#city-dropdown').html('<option value="">-- Select LGA --</option>');

            $.each(res.cities, function (key, value) {

                $("#city-dropdown").append('<option value="' + value

                    .id + '">' + value.lgaDistrict + '</option>');

            });

        }

    });

});



});
</script>
@endpush