@extends('layouts.app')

@section('style')
    <style>
        .normal-textarea {
            border: 1px solid #E3E3E3 !important;
        }
        .invalid-textarea {
            border: 1px solid #dc3545 !important;
        }
    </style>
@endsection

@section('content')
<div class="col-12">

</div>
<div class="col-12">
    <div class="card">
        <div class="card-header pl-5">
            <h5 class="title ">New Incident Report</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb"style="background-color: white; padding-left: 2px">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('incident') }}">Incident Report</a></li>
                    <li class="breadcrumb-item active" aria-current="page">New</li>
                </ol>
            </nav>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('incident.store') }}" enctype="multipart/form-data" onsubmit="formSubmit()">
                @csrf
                <div class="row  pr-5 pl-5">

                    <div class="col-12 mb-2">
                        <strong>Personnel Information</strong>
                    </div>

                    <div class="col-12 mb-2">
                        <div class="table-responsive">
                            <table class="table" id="personnelTable">
                                <thead class=" text-primary">
                                    <tr>
                                        <td>Personnel</td>
                                        <td>Designation</td>
                                        <td>Post</td>
                                        <td>Contact No.</td>
                                        <td>On Duty</td>
                                        <td>Action</td>
                                    </tr>
                                </thead>
                                <tbody id="tblPersonnel">
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="col-12 text-right">
                        <button class="btn btn-sm btn-success ml-auto mt-0" type="button" style="font-size: 14px !important"  data-toggle="modal" data-target="#exampleModal">
                            <i class="now-ui-icons ui-1_simple-add"></i>
                        </button>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            @if ($errors->has('pid'))
                                <div>
                                    <strong class="text-danger">Please choose a personnel</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12 mb-2">
                        <strong>Incident Information</strong>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label>Report Type</label>
                            <select type="number" class="form-control js-example-basic-single @if ($errors->has('report_type')) is-invalid @endif" placeholder="required" name="report_type" value="{{ old('report_type') }}">
                                <option></option>
                                <option value="Merit" @if(old('report_type') == 'Merit') selected @endif>Merit</option>
                                <option value="Demerit" @if(old('report_type') == 'Demerit') selected @endif>Demerit</option>
                            </select>
                            @if ($errors->has('report_type'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('report_type') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label>Location of Incident</label>
                            <input type="text" class="form-control @if ($errors->has('location_of_incident')) is-invalid @endif" placeholder="required" name="location_of_incident" value="{{ old('location_of_incident') }}">
                            @if ($errors->has('location_of_incident'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('location_of_incident') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label>Date</label>
                            <input type="text" class="form-control selector @if ($errors->has('date')) is-invalid @endif" placeholder="required" name="date" value="{{ old('date') }}">
                            @if ($errors->has('date'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('date') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label>Time</label>
                            <input type="text" class="form-control timepicker @if ($errors->has('time')) is-invalid @endif" placeholder="required" name="time" value="{{ old('time') }}">
                            @if ($errors->has('time'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('time') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12 col-md-4 mt-3">
                        <div class="form-check form-check-inline pt-2">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" style="height:35px; width:35px; height: 2em; opacity: 1 !important; visibility: visible !important" name="police_notified" @if(old('police_notified') == 1) checked="checked" @endif value="1">
                            <label class="form-check-label ml-3" for="inlineCheckbox1">Police Notified</label>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label>Incident Title</label>
                            <input type="text" class="form-control @if ($errors->has('incident_title')) is-invalid @endif" placeholder="required" name="incident_title" value="{{ old('incident_title') }}">
                            @if ($errors->has('incident_title'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('incident_title') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label>Incident Details</label>
                            <input type="text" class="form-control @if ($errors->has('incident_details')) is-invalid @endif" placeholder="required" name="incident_details" value="{{ old('incident_details') }}">
                            @if ($errors->has('incident_details'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('incident_details') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label>Incident Cause</label>
                            <input type="text" class="form-control @if ($errors->has('incident_cause')) is-invalid @endif" placeholder="required" name="incident_cause" value="{{ old('incident_cause') }}">
                            @if ($errors->has('incident_cause'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('incident_cause') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label>Follow-up Recommendations</label>
                            <textarea type="text" class="form-control normal-textarea @if ($errors->has('follow_up_recommendations')) is-invalid invalid-textarea @endif" placeholder="optional" name="follow_up_recommendations">{{ old('follow_up_recommendations') }}</textarea>
                            @if ($errors->has('follow_up_recommendations'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('follow_up_recommendations') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>



                    <div class="col-12 col-md-8">
                        <div class="form-group">
                            <label>Status</label>
                            <select type="number" class="form-control js-example-basic-single @if ($errors->has('status')) is-invalid @endif" placeholder="required" name="status" value="{{ old('status') }}">
                                <option></option>
                                <option value="Open" @if(old('status') == 'Open') selected @endif>Open</option>
                                <option value="Pending" @if(old('status') == 'Pending') selected @endif>Pending</option>
                                <option value="Resolved" @if(old('status') == 'Resolved') selected @endif>Resolved</option>
                            </select>
                            @if ($errors->has('status'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('status') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12 col-md-4 mt-3">
                        <div class="form-check form-check-inline pt-2">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" style="height:35px; width:35px; height: 2em; opacity: 1 !important; visibility: visible !important" name="verified_by_admin" @if(old('verified_by_admin') == 1) checked="checked" @endif value="1">
                            <label class="form-check-label ml-3" for="inlineCheckbox2">Verified by Admin</label>
                        </div>
                    </div>

                    <div class="col-12 mb-2 mt-4">
                        <strong>Reporters Information</strong>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label>Name</label>
                            <select type="number" class="form-control js-example-basic-single @if ($errors->has('name')) is-invalid @endif" placeholder="required" name="name" value="{{ old('name') }}" id="txtReporter" >
                                <option></option>
                                @foreach($personnels as $personnel)
                                    <option value="{{ $personnel->id }}"  @if(old('name') == $personnel->id) selected @endif>{{ $personnel->last_name . ', ' . $personnel->first_name }}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('name'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('name') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label>Designation</label>
                            <input type="text" class="form-control @if ($errors->has('designation')) is-invalid @endif" placeholder="required" name="designation" value="{{ old('designation') }}" id="txtReporterDesign" readonly>
                            @if ($errors->has('designation'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('designation') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label>Contact Number</label>
                            <input type="text" class="form-control @if ($errors->has('contact_number')) is-invalid @endif" placeholder="required" name="contact_number" value="{{ old('contact_number') }}" id="txtReporterContact" readonly>
                            @if ($errors->has('contact_number'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('contact_number') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-12">
                        <button type="submit" class="d-block d-md-none ml-auto btn btn-md btn-primary btn-block">
                            <span class="icon text-white-50">
                                <i class="fas fa-save"></i>
                            </span>
                            &nbsp;Save
                        </button>
                        <button type="submit" class="d-none d-md-block ml-auto btn btn-md btn-primary btn-block" style="width: 155px">
                            <span class="icon text-white-50">
                                <i class="fas fa-save"></i>
                            </span>
                            &nbsp;Save
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add Personnel</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="col-12">
                <div class="form-group">
                    <label>Personnel</label>
                    <select type="number" class="form-control js-example-basic-single" id="txtSelectPersonnel">
                        <option></option>
                        @foreach($personnels as $personnel)
                            <option value="{{ $personnel->id }}">{{ $personnel->last_name . ', ' . $personnel->first_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-success ml-3" id="btnAdd">Add</button>
        </div>
      </div>
    </div>
  </div>

@section('script')
    <script>
        notif = {
            misc: {
            navbar_menu_visible: 0
            },

            showNotification: function(from, align, color, msg) {

            $.notify({
                icon: "now-ui-icons ui-1_bell-53",
                message: msg

            }, {
                type: color,
                timer: 8000,
                placement: {
                from: from,
                align: align
                }
            });
            }
        };
        @if(session()->has('message.level'))
            notif.showNotification('top','right', '{{ session('message.level') }}', '{{ session('message.content') }}')
        @endif

        $(".timepicker").flatpickr({
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true
        });

        $(".selector").flatpickr();

        function formSubmit() {
            loader();
            return true;
        }

        let includedPersonnel = []

        @if(old('pid'))
            @if(old('on_duty'))
            let onDutyArr = [ @foreach(old('on_duty') as $od) {{ $od . ', ' }} @endforeach]
            @else
            let onDutyArr = []
            @endif
            let onDuty = false
            @foreach (old('pid') as $pid)
            onDuty = onDutyArr.includes({{ $pid }});
            console.log(onDuty)
            loadPersonnelInfo({{ $pid }}, onDuty)
            @endforeach
        @endif

        $("#btnAdd").click(function() {
            let pid = $('#txtSelectPersonnel').val()

            //check if personnel already added
            let parseId = parseInt(pid)
            let existing = includedPersonnel.indexOf(parseId)

            if(existing != -1) {
                notif.showNotification('top','right', 'danger', 'This personnel is already added')
            } else {
                loadPersonnelInfo(pid, false)
            }
        });

        function loadPersonnelInfo(id, onduty) {
            loader();
            let is_onduty = onduty ? 'checked="checked"' : ''
            $.ajax({
                url : "{{ route( 'loadPersonnelIncident' ) }}",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': id,
                },
                type: 'post',
                dataType: 'json',
                success: function( result )
                {
                    includedPersonnel.push(result.id)
                    let branch = result.branch_name ? result.branch_name : '<span class="text-secondary">N/A</span>'
                    $('#tblPersonnel').append(
                        '<tr id="rmvTr' + result.id + '">' +
                            '<td>' + result.first_name + ' ' + result.last_name + '<input type="hidden" value=" ' + result.id + '" name="pid[]" />' + '</td>' +
                            '<td>' + result.type + '</td>' +
                            '<td>' + branch + '</td>' +
                            '<td>' + result.contact_number + '</td>' +
                            '<td>' +
                                '<input class="form-check-input ml-2" type="checkbox" id="inlineCheckbox' + result.id + '" style="height:35px; width:35px; height: 2em; opacity: 1 !important; visibility: visible !important; margin-top: -15px" name="on_duty[]" value="' + result.id + '"' + is_onduty +'>' +
                            '</td>' +
                            '<td>' +
                                '<button type="button" id="rmv' + result.id + '" class="btn btn-xs btn-danger btnRemoveAdj" style="width: 25px !important; height: 25px !important; padding: 5px">' +
                                    '<span class="icon text-white-50">' +
                                        '<i class="fas fa-times"></i>' +
                                    '</span>' +
                                '</button>' +
                            '</td>' +
                        '</tr>'
                    );
                    $('#txtSelectPersonnel option:not(:selected)');
                    $('#exampleModal').modal('hide');

                    $('.btnRemoveAdj').click(function(){
                        let id = $(this).attr('id').substring(3)
                        $('#personnelTable tr[id="rmvTr' + id + '"]').remove();

                        let parseId = parseInt(id)
                        let index = includedPersonnel.indexOf(parseId)

                        if(index!=-1){
                            includedPersonnel.splice(index, 1);
                        }
                    });
                    unloader();
                },
                error: function()
                {
                    notif.showNotification('top','right', 'danger', 'Please select a personnel')
                    unloader();
                }
            });
        }

        $('#txtReporter').on('change', function() {
            let pid = $(this).val()
            loadReportersInfo(pid);
        });

        function loadReportersInfo(id) {
            loader();
            $.ajax({
                url : "{{ route( 'loadPersonnelIncident' ) }}",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': id,
                },
                type: 'post',
                dataType: 'json',
                success: function( result )
                {
                    $('#txtReporterDesign').val(result.type)
                    $('#txtReporterContact').val(result.contact_number)
                    unloader();
                },
                error: function()
                {
                    notif.showNotification('top','right', 'danger', 'Please select a personnel')
                    unloader();
                }
            });
        }
    </script>

@endsection

@endsection