@extends('adminlte::page')

@section('title', 'Action Details')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1><a href='/threatdetails'>S2 Soot Blower</a></h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href='/threatdetails'>Threat - S2 Soot Blower</a></li>
                <li class="breadcrumb-item active">Action Details</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary card-tabs card-outline">
                <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="parent-tabs-one-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="parent-tabs-one-details-tab" data-toggle="pill"
                                href="#parent-tabs-one-details" role="tab" aria-controls="parent-tabs-one-details"
                                aria-selected="true">Information</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="parent-tabs-one-additional-tab" data-toggle="pill"
                                href="#parent-tabs-one-additional" role="tab" aria-controls="parent-tabs-one-additional"
                                aria-selected="false">Additional Information</a>
                        </li>
                    </ul>
                    <div class="card-tools">
                        <button type="button" class="btn btn-danger btn-sm confirm-delete">Delete</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="parent-tabs-one-tabContent">
                        <div class="tab-pane fade active show" id="parent-tabs-one-details" role="tabpanel"
                            aria-labelledby="parent-tabs-one-details-tab">
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="inputActionName">Action Name</label>
                                        <input type="text" id="inputActionName" class="form-control" value="to do xyz">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        @php
                                            $config = [
                                                "placeholder" => "Select Threat",
                                                "allowClear" => false,
                                            ];
                                        @endphp
                                        <!-- Select2 Input -->
                                        <x-adminlte-select2 id="sel2ThreatSearch" name="sel2ThreatSearch" label="Threat"
                                            :config="$config">
                                            <option value="S2 Soot Blower" selected>S2 Soot Blower</option>
                                            <option>Management of SMPO2</option>
                                            <option>LCY term contract</option>
                                            <option>Leverage contractual</option>
                                            <option>CI_Setsco NDT</option>
                                            <option>CI_CHEMICAL DECON</option>
                                        </x-adminlte-select2>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="inputActionType">Action Type</label>
                                        <select id="inputActionType" class="form-control custom-select">
                                            <option>Select Type</option>
                                            <option selected="">Long Term Solution</option>
                                            <option>Interim Mitigation</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        @php
                                            $config = [
                                                "placeholder" => "Select User",
                                                "allowClear" => false,
                                            ];
                                        @endphp
                                        <!-- Select2 Input -->
                                        <x-adminlte-select2 id="sel2AssignToUser" name="sel2AssignToUser"
                                            label="Assign to Contact" :config="$config">
                                            <option>Jason Ke</option>
                                            <option>Brayan</option>
                                            <option>Rahul</option>
                                            <option selected="">Kavitha Iyer</option>
                                        </x-adminlte-select2>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="Status">Status</label>
                                        <select id="Status" class="form-control custom-select">
                                            <option>Select Status</option>
                                            <option>Open</option>
                                            <option selected="">Completed</option>
                                            <option>In Progress</option>
                                            <option>On Hold</option>
                                            <option>Cancelled</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        {{-- With Label --}}
                                        @php
                                            $config = ['format' => 'DD-MM-YYYY'];
                                        @endphp
                                        <x-adminlte-input-date name="StartDateLabel" :config="$config"
                                            placeholder="Choose a start date..." label="Start Date"
                                            label-class="text-default">
                                        </x-adminlte-input-date>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea name="description" class="form-control" rows="3"
                                            placeholder="Enter Description ..."></textarea>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="commentary">Commentary</label>
                                        <textarea name="commentary" class="form-control" rows="3"
                                            placeholder="Enter Commentary ..."></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <x-adminlte-input-date name="DueDateLabel" :config="$config"
                                            placeholder="Choose a due date..." label="Due Date" label-class="text-default">
                                        </x-adminlte-input-date>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <div class="row pl-2">
                                            <label for="inputnotification">Send Notification Email</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="checkbox2" checked>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="description">Completion Date</label>
                                        <p>29-12-2024</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="parent-tabs-one-additional" role="tabpanel"
                            aria-labelledby="parent-tabs-one-additional-tab">
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="inputLastModifiedBy">Last Modified By</label>
                                        <p>Robert Joson</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Created By</label>
                                        <p>Rahul Swami</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="inputLastModifiedAt">Last Modified At</label>
                                        <p>18-12-2024 10:00 PM</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Created At</label>
                                        <p>11-12-2024 05:15 PM</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <a href="{{route('dashboard')}}" class="btn btn-default">Cancel</a>
            <a href="{{route('dashboard')}}" class="btn btn-success float-right">Save Changes</a>
        </div>
    </div>
@endsection

@push('js')
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
    <script>
        $(".confirm-delete").click(function (e) {
            e.preventDefault();
            Swal.fire({
                title: "Are you sure?",
                text: "",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#28a745",
                cancelButtonColor: "#6c757d",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: "top",
                        showConfirmButton: false,
                        timer: 4000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.onmouseenter = Swal.stopTimer;
                            toast.onmouseleave = Swal.resumeTimer;
                        }
                    });
                    window.location.href = "/dashboard";
                    Toast.fire({
                        icon: "success",
                        title: "Action deleted successfully."
                    });
                }
            });
        });
    </script>
@endpush