@extends('layout.master')
@section('title', 'Add Isolation Center')
@section('stat', 'active')
@section('centres', 'active')
@section('add-centre', '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="{{route('/submitCentre')}}" method="post" id="isolationForm">

                    <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" required class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Centre Capacity</strong></label>
                                            <input type="number" name="centre_capacity" id="centre_capacity" required class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Contact Person</strong></label>
                                            <input type="number" name="contact_person" id="contact_person" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Contact Phone</strong></label>
                                            <input type="number" name="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>
                                            <input type="number" name="address" id="address" required class="form-control">
                                        </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" onchange="fetch_state_stat()" 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}}" {{$state_id == $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" onchange="fetch_lga_stat()" id="lga_id" class="form-control"></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"></select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for=""><strong>Latitude</strong></label>
                                            <input type="text" 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" id="longitude" required class="form-control">
                                        </div>
                                    </div>
                                    {{ csrf_field() }}
                                    <input type="hidden" name="reported_by" value="{{currentUser()->id}}">

                                    <div class="form-group">
                                        <button class="btn btn-md btn-primary" id="caseBtn">SUBMIT CENTRE</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 fetch_state_stat() {
            $('#state_cases').html('');
            $('#lga_cases').html('');
            var state = $('select#state').val();
            axios({
                method: 'post',
                url: '{{route('/fetch_state_stat')}}',
                data: {_token:'{{csrf_token()}}', state:state, index:'0',recovery:'0'}
            })
            .then(function (response) {
                if(response.statusText==='OK')
                {
                    $('#state_cases').html("<strong>"+state+" State:</strong> <br><h4 class='text-danger'>"+response.data.figure+" Cases</h4>");
                }
            })
            .catch(function (data) {
                console.log('Oops!: '+data.error);
            });
        }

        function fetch_lga_stat() {
            $('#lga_cases').html('');
            var state = $('select#state').val();
            var lga = $('select#local_government').val();
            axios({
                method: 'post',
                url: '{{route('/fetch_lga_stat')}}',
                data: {_token:'{{csrf_token()}}', state:state, lga:lga, index:'0',recovery:'0'}
            })
            .then(function (response) {
                if(response.statusText==='OK')
                {
                    $('#lga_cases').html("<strong>"+lga+" LGA:</strong> <br><h4 class='text-danger'>"+response.data.figure+" Cases</h4>");
                }
            })
            .catch(function (data) {
                console.log('Oops!: '+data.error);
            });
        }

        $(function() {
            $('#state_id').trigger("change");
            $('#isolationForm').submit(function (e) {
                e.preventDefault();

                $('#state').add($('#local_government')).add($('#date_of_confirmation')).add($('#number_of_case')).removeClass('is-invalid');
                $('#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('SUBMIT CENTRE');
                    if(response.statusText==='OK')
                    {
                        $.toast({text: response.data.done, icon: 'success', position: 'top-right'});
                        $('#isolationForm')[0].reset();
                        $('#state_cases').html('');
                        $('#lga_cases').html('');
                        location.reload();
                    } else{
                        $.toast({text: response.data.error, icon: 'error', position: 'top-right'});
                    }
                })
                .catch(function (data) {
                    console.log('Oops!: '+data.error);
                    $('#caseBtn').prop('disabled', false).html('SUBMIT CENTRE');
                });
            });
        });
    </script>
@endsection