@extends('layouts/layout')
@section('title', 'Incident Type')
@push('style')
<style>
.modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    z-index: 1051;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.x_panel {
    height: 100vh !important;
}
</style>
@endpush

@section('content')
@if ($message = Session::get('success'))
@include('sweetalert::alert')
@endif
<!-- page content -->
<div class="" role="main">
    <div class="">
        <div class="row">
            <div class="col-md-12 col-sm-12 mt-2">
                <div class="x_panel">

                    <div class="x_title d-flex align-items-center justify-content-between">
                        <h2 class="mb-0">Incident Type</h2>
                    </div>

                    <div class="x_content mt-0 p-0">
                        <form action="{{ route('incident_type.update', $incident_type[0]->id) }}" method="post"
                            class="mb-3">
                            @method('PUT')
                            @csrf
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                    <div class="form-group">
                                        <label class="mb-1">Category Name</label>
                                        <select class="select2 form-control" name="category_id" id="category_id"
                                            data-toggle="select2">
                                            <option disabled>Select Category</option>
                                            @foreach($category as $category_name)
                                            <option value="{{ $category_name->category_id }}"
                                                {{ $category_name->category_id == $incident_type[0]->category_id ? 'selected' : '' }}>
                                                {{ $category_name->category_name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <span id="template_type_error" class="text-danger d-inline-block"></span>
                                    </div>

                                </div>
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                    <div class="form-group">
                                        <label class="mb-1">Incident Type</label>
                                        <input type="text" id="incident_type" name="incident_type" autocomplete="off"
                                            class="form-control" value="{{$incident_type[0]->incident_type}}"
                                            placeholder="Enter Incident Type">
                                        <span id="incident_type_error" class="text-danger d-inline-block"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group text-center">
                                <!-- Centering the button -->
                                <input type="submit" class="btn btn-success btn-round btn-primary"
                                    name="create_template" id="create_template" value="Submit" />
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#create_template").on('click', function() {
        var error_msg = "";

        if ($("#incident_type").val() == "") {
            $("#incident_type_error").text("Please enter Incident Type.");
            error_msg = "Error";
        } else {
            $("#incident_type_error").text("");
        }
        if ($("#status").val() == "") {
            $("#status_error").text("Please enter status.");
            error_msg = "Error";
        } else {
            $("#status_error").text("");
        }

        if (error_msg) {
            return false;
        }
    });
});
</script>
@endpush