@extends('adminlte::page')

@section('title', 'Approval Request')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1>Approval Request Details</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="/myapprovals">My Approvals</a></li>
            <li class="breadcrumb-item active">Approval Request Details</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title pt-1">Threat Approval - <span class="text-orange">Pending</span></h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-success btn-sm confirm-delete" data-toggle="modal"
                        data-target="#modalApprove">Approve</button>
                    <button type="button" class="btn btn-danger btn-sm confirm-delete" data-toggle="modal"
                        data-target="#modalReject">Reject</button>
                    <button type="button" class="btn btn-primary btn-sm confirm-delete" data-toggle="modal"
                        data-target="#modalReassign">Reassign</button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-3">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Submitter</label>
                            <p>Phoi Chin Goh</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Date Submitted</label>
                            <p>11-12-2024</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Actual Approver</label>
                            <p>Rahul Swami</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Assigned To</label>
                            <p>Rahul Swami</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title">Approval Details</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-4">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Threat Name</label>
                            <p><a href="/threatdetails">Flare Hydraulic Adequacy Impact due to
                                    Fouling</a></p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Owner</label>
                            <p>Phoi Chin Goh</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Workstream</label>
                            <p><a href="/workstreamdetails">MTO SMPO PT Jurong</a></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Overall Status</label>
                            <p>New Entry</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Phase</label>
                            <p>L1 Identify</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputActionName">Open Actions by Current Phase</label>
                            <p>1</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title">Submitter Comments</h3>
            </div>
            <div class="card-body">
                <div class="post">
                    <div class="user-block">
                        <img class="img-circle img-bordered-sm" src="{{ asset('assets/images/user2-160x160.jpg') }}"
                            alt="user image">
                        <span class="username">
                            Phoi Chin Goh
                        </span>
                        <span class="description">11-12-2024 05:45 PM</span>
                    </div>
                    <!-- /.user-block -->
                    <p>
                        Task completed. Ready to move to next level.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Custom --}}
<x-adminlte-modal id="modalApprove" title="Approve Threat" size="m" theme="primary" icon="fas fa-check" v-centered
    static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Comments</label>
                                <textarea name="description" class="form-control" rows="5"
                                    placeholder="Enter Comments ..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close" data-dismiss="modal" />
        <x-adminlte-button theme="success" label="Approve" class="modal-btn-save-changes" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>
<x-adminlte-modal id="modalReject" title="Reject Threat" size="m" theme="primary" icon="fas fa-times" v-centered
    static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Comments</label>
                                <textarea name="description" class="form-control" rows="5"
                                    placeholder="Enter Comments ..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close" data-dismiss="modal" />
        <x-adminlte-button theme="danger" label="Reject" class="modal-btn-save-changes" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>
<x-adminlte-modal id="modalReassign" title="Reassign Approval Request" size="m" theme="primary" icon="fas fa-user-plus"
    v-centered static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                @php
                                    $config = [
                                        "placeholder" => "Reassign User",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2AssignToUser" name="sel2AssignToUser"
                                    label="Reassign To User" :config="$config">
                                    <option>Jason Ke</option>
                                    <option>Brayan</option>
                                    <option>Rahul</option>
                                    <option>Kavitha Iyer</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Comments</label>
                                <textarea name="description" class="form-control" rows="5"
                                    placeholder="Enter Comments ..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close" data-dismiss="modal" />
        <x-adminlte-button theme="success" label="Reassign" class="modal-btn-save-changes" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>
{{-- Example button to open modal --}}
@endsection