@extends('layout.master')
@section('title', 'Edit Test Center')
@section('testcenter', 'active')
@section('add-testcentre', 'active')
@section('levelCSS')
    <link rel="stylesheet" href="{{asset('vendors/select2/select2.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendors/select2-bootstrap-theme/select2-bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendors/bootstrap-datepicker/bootstrap-datepicker.min.css')}}">
@endsection

@section('body')

    <div class="col-md-12">
        <div class="tab-content tab-transparent-content pb-0">
            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">

                <form action="{{url('test_centre/edit/'.$info->id)}}" method="post">

                    <div class="row">
                        <div class="col-sm-8 offset-sm-1">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Centre Name</strong></label>
                                            <input type="text" name="centre_name" id="centre_name" value="{{$info->centre_name}}" required class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Contact Person</strong></label>
                                            <input type="text" name="contact_person" id="contact_person" class="form-control" value="{{$info->contact_person}}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Contact Phone</strong></label>
                                            <input type="text" name="contact_phone" value="{{$info->contact_phone}}" id="contact_phone" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Address</strong></label>
                                            <textarea name="address" id="address" required class="form-control">{{$info->address}}</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <input type="hidden" name="token" required value="{{substr(md5(\Carbon\Carbon::now()), '0', '10')}}">
                                            <label for="">State</label>
                                            <select name="state" id="state_id" required class="form-control">
                                                @if (count($states) > 1)
                                                    <option value="" selected="selected" >-Select State-</option>
                                                @endif
                                                @foreach($states as $state)
                                                    <option value="{{$state->state_id}}" {{$info->state == $state->state_id  ? 'selected' : ''}}>{{$state->state_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for="">Local Government</label>
                                            <select name="lga" id="lga_id" class="form-control">
                                                @foreach($lgas as $lga)
                                                    <option value="{{$lga->lga_id}}" {{$info->lga == $lga->lga_id  ? 'selected' : ''}}>{{$lga->lga_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Ward</strong></label>
                                            <select name="ward" id="ward_id" required class="form-control">
                                                @foreach($wards as $ward)
                                                    <option value="{{$ward->ward_id}}" {{$info->ward == $ward->ward_id  ? 'selected' : ''}}>{{$ward->ward_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Latitude</strong></label>
                                            <input type="text" value="{{$info->latitude}}" name="latitude" id="latitude" required class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Longitude</strong></label>
                                            <input type="text" name="longitude" value="{{$info->longitude}}" id="longitude" required class="form-control">
                                        </div>
                                    </div>
                                    {{ csrf_field() }}
                                    <input type="hidden" name="id" value="{{$info->id}}">

                                    <div class="form-group">
                                        <button class="btn btn-md btn-primary" id="caseBtn">SAVE RECORD</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('levelJS')
    <script src="{{asset('vendors/select2/select2.min.js')}}"></script>
    <script src="{{asset('js/lga.js')}}"></script>
    <script src="{{asset('vendors/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
    <script !src="">

        $(document).on('change', '#state_id', function(){
            var state = $(this).val();
            var url = '{{route('/get_lga')}}';
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: url,
                data: 'state='+state+'&type=lga',
                success: function(data){
                    $('#lga_id').html(data);
                },
            });
        });

        $(document).on('change', '#lga_id', function(){
            var lga = $(this).val();
            var url = '{{route('/get_lga')}}';
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: url,
                data: 'lga='+lga+'&type=ward',
                success: function(data){
                    $('#ward_id').html(data);
                },
            });
        });

        if ($("#datepicker-popup").length) {
            $('#datepicker-popup').datepicker({
                enableOnReadonly: true,
                todayHighlight: true,
                format: 'dd-mm-yyyy'
            });
        }
        $(function() {
            $('#caseForm').submit(function (e) {
                e.preventDefault();

                $('#caseBtn').prop('disabled', true).html("Submitting <i class='fa fa-spin fa-spinner'></i>");

                var formData = $(this).serialize();
                var url = $(this).attr('action');

                axios({
                    method: 'post',
                    url: url,
                    data: formData
                })
                .then(function (response) {
                    $('#caseBtn').prop('disabled', false).html('SAVE RECORD');
                    if(response.statusText==='OK')
                    {
                        $.toast({text: response.data.done, icon: 'success', position: 'top-right'});
                        $('#caseForm')[0].reset();
                        location.reload();
                    }
                })
                .catch(function (data) {
                    console.log('Oops!: '+data.error);
                    $('#caseBtn').prop('disabled', false).html('SUBMIT CASE');
                });
            });
        });
    </script>
@endsection