@extends('layouts.app')

@section('content')

@if (session('message'))
    <div class="alert alert-danger col-md-12">
        <span class="help-block">
            <strong>{{ session('message') }}</strong>
        </span>
    </div>
@endif

@if (session('success'))
    <div class="alert alert-danger col-md-12">
        <span class="help-block">
            <strong>{{ session('success') }}</strong>
        </span>
    </div>
@endif

    <form action="{{ route('series.store') }}" method="POST">
        {!! csrf_field() !!}
        <!-- Content Row -->
        <div class="row">   
            <div class="col-md-12">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Location:</label>
                        <select class="form-control" name="location" id="location">
                            <option selected disabled>Choose here...</option>
                            @foreach($location as $loc)
                            <option value="{{ $loc->location_id }}">{{ strtoupper($loc->location_description) }}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('location'))
                            <span class="help-block">
                                <strong>{{ $errors->first('location') }}</strong>
                            </span>
                        @endif
                    </div>

                    <div class="form-group col-md-6">
                        <label>Insurer:</label>
                        <select class="form-control" name="insurer" id="insurer">
                            <option selected disabled>Choose here...</option>
                        </select>
                        @if ($errors->has('insurer'))
                            <span class="help-block">
                                <strong>{{ $errors->first('insurer') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Policy From:</label>
                        <input type="text" name="policy-from" class="form-control" value="{{ old('policy-from') }}">
                        @if ($errors->has('policy-from'))
                            <span class="help-block">
                                <strong>{{ $errors->first('policy-from') }}</strong>
                            </span>
                        @endif
                    </div>

                    <div class="form-group col-md-6">
                        <label>Policy To:</label>
                        <input type="text" name="policy-to" class="form-control" value="{{ old('policy-to') }}">
                        @if ($errors->has('policy-to'))
                            <span class="help-block">
                                <strong>{{ $errors->first('policy-to') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="col-md-12">
                    <button type="submit" id="btnsave" class="btn btn-primary btn-lg" style="float:right;">Save</button>
                </div>
            </div>
        </div>
    </form>

    <div class="card shadow mb-4">
            <div class="card-header py-3">
              <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
            </div>
            <div class="card-body">
    <div class="table-responsive">
        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Location</th>
                <th>Insurer</th>
                <th>Policy From</th>
                <th>Policy To</th>
                <th>Total No. of Policies</th>
                <th>Used</th>
                <th>Available</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        @foreach($series as $ser)
            <tr>
                <td>{{ $ser->location_name }}</td>
                <td>{{ $ser->insurer }}</td>
                <td>{{ $ser->policy_from }}</td>
                <td>{{ $ser->policy_to }}</td>
                <td>{{ $ser->total }}</td>
                <td>{{ $ser->used }}</td>
                <td>{{ $ser->available }}</td>
                <td>
                    @if($ser->status!='')
                        {{ $ser->status }}
                    @else
                        <a href="{{ url('maintenance/series/tag/'.$ser->series_id) }}" class="btn btn-primary">Tag as Current</a>
                    @endif
                </td>
            <tr>
            @endforeach
        </tbody>
        </table>
    </div>
</div>
</div>
@endsection
  <!-- Bootstrap core JavaScript-->
  <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
  <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>

  <!-- Core plugin JavaScript-->
  <script src="{{ asset('vendor/jquery-easing/jquery.easing.min.js') }}"></script>

  <!-- Custom scripts for all pages-->
  <script src="{{ asset('js/sb-admin-2.min.js') }}"></script>

  <!-- Page level plugins -->
  <script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
  <script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

  <!-- Page level custom scripts -->
  <script src="{{ asset('js/demo/datatables-demo.js') }}"></script> 

    <script>
    $(document).ready(function() {

        
 
            $('#dataTable').DataTable();
  


        $('#location').on('change', function(){
            var loc = $(this).val();
            // Empty the dropdown
            $('#insurer').find('option').not(':first').remove();

            $.ajax({
                url: '{{ url("/series") }}' + '/' + loc,
                type: "GET",
                dataType: 'json' ,
                success: function (response) {
                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }

                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){
                            var id = response['data'][i].insurer_id;
                            var name = response['data'][i].insurer_name;

                            var option = "<option value='"+id+"'>"+name.toUpperCase()+"</option>"; 

                            $("#insurer").append(option); 
                        }
                    }
                }
            });
        });
    });
    </script>