@extends('layouts.app_layout')

@section('content')
<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle }}" :backButton="true" />
<!-- [ Page Header ] end -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body p-0 overflow-hidden">
                <!-- SmartWizard html -->
                <ul class="nav nav-pills">
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button active" data-bs-toggle="tab" role="tab" href="#step-1">
                            <div class="fw-bold">1</div>
                            Basic Information
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" data-bs-toggle="tab" role="tab" href="#step-2">
                            <div class="fw-bold">2</div>
                            Address
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" data-bs-toggle="tab" role="tab" href="#step-3">
                            <div class="fw-bold">3</div>
                            Trainers
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" data-bs-toggle="tab" role="tab" href="#step-4">
                            <div class="fw-bold">4</div>
                            Infrastructure
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" data-bs-toggle="tab" role="tab" href="#step-5">
                            <div class="fw-bold">5</div>
                            Programs
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" data-bs-toggle="tab" role="tab" href="#step-6">
                            <div class="fw-bold">6</div>
                            Documents
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" data-bs-toggle="tab" role="tab" href="#step-7">
                            <div class="fw-bold">7</div>
                            Action
                        </a>
                    </li>
                </ul>

                <div class="tab-content px-3 py-4 bg-white">
                    <!-- Step 1: Basic Information -->
                    <div id="step-1" class="tab-pane active show" role="tabpanel">
                        <x-training-centre.basic-information :data="$applicationData" />
                    </div>

                    <!-- Step 2: Address Details -->
                    <div id="step-2" class="tab-pane" role="tabpanel">
                        <x-training-centre.address-details :data="$applicationData" />
                    </div>

                    <!-- Step 3: Trainers -->
                    <div id="step-3" class="tab-pane" role="tabpanel">
                        <x-training-centre.trainers-information :trainers="$applicationData['trainers']" />
                    </div>

                    <!-- Step 4: Infrastructure -->
                    <div id="step-4" class="tab-pane" role="tabpanel">
                        <x-training-centre.infrastructure :data="$applicationData" />
                    </div>

                    <!-- Step 5: Programs -->
                    <div id="step-5" class="tab-pane" role="tabpanel">
                        <x-training-centre.programs :programs="$applicationData['programs']" />
                    </div>

                    <!-- Step 6: Documents & Declaration -->
                    <div id="step-6" class="tab-pane" role="tabpanel">
                        <x-training-centre.documents-declaration :documents="$applicationData['documents']" />
                    </div>

                    <!-- Step 7: Action -->
                    <div id="step-7" class="tab-pane" role="tabpanel">
                        @props(['data', 'notings'])

                        <div class="step-header text-center">
                            <h2 class="step-title">Action Required</h2>
                            <p class="step-subtitle">Review and submit your application</p>
                            <div class="step-content">
                                <p>Please review all the information provided in the previous steps. If everything is correct, you may submit your application.</p>
                            </div>
                        </div>


                        <div class="row">
                            <!-- Assign the application -->
                            <div class="col-md-6 col-12">
                                <div class="card">
                                    <div class="card-header bg-primary text-center py-3">
                                        <h4 class="card-title text-white mb-0 text-lg">
                                            Assign the application to a member
                                        </h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12 col-12 mb-3">
                                                <label for="assign_to" class="form-label">Assign To</label>
                                                <select class="form-select" id="assign_to" name="assign_to" required>
                                                    <option value="" selected disabled>-- Select --</option>
                                                    <option value="admin">Manoj Yadav</option>
                                                    <option value="trainer">Manish Singh</option>
                                                </select>
                                            </div>
                                            <div class="col-12 mb-3">
                                                <label for="remarks" class="form-label">Remarks</label>
                                                <textarea name="remarks" id="remarks" class="form-input form-control" rows="4"></textarea>
                                            </div>
                                            <div class="col-md-12 col-12 mb-3 text-center">
                                                <button type="button" class="btn btn-primary">
                                                    <i class="fa fa-paper-plane"></i>
                                                    Assign Application
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr>

                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <div class="card">
                                            <div class="card-header bg-primary text-center py-3">
                                                <h4 class="card-title text-white mb-0 text-lg">
                                                    Scrutinize & Submit Application
                                                </h4>
                                            </div>
                                            <div class="card-body">
                                                <div class="alert alert-info">
                                                    <strong>Important:</strong>
                                                    <ul>
                                                        <li>
                                                            Please ensure all details are accurate before submitting. Once submitted, you will not be able to make changes.
                                                        </li>
                                                        <li>
                                                            If discrepancies are found, the application will be sent back to the applicant.
                                                        </li>
                                                        <li>
                                                            If no descrepancy is found, the application will be approved and LOR will be generated.
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="mb-3">
                                                    <strong>Current Status:</strong>
                                                    <span class="badge bg-{{ $data['status_class'] ?? 'primary' }}">{{ $data['status'] ?? 'Under Review' }}</span>
                                                </div>

                                                <div class="checkbox-grid">
                                                    <label class="checkbox-label mb-3">
                                                        <input type="checkbox" class="d-block">
                                                        <span class="checkbox-custom"></span>
                                                        Basic Information
                                                    </label>
                                                    <label class="checkbox-label mb-3">
                                                        <input type="checkbox" class="d-block">
                                                        <span class="checkbox-custom"></span>
                                                        Address
                                                    </label>
                                                    <label class="checkbox-label mb-3">
                                                        <input type="checkbox" class="d-block">
                                                        <span class="checkbox-custom"></span>
                                                        Trainers
                                                    </label>
                                                    <label class="checkbox-label mb-3">
                                                        <input type="checkbox" class="d-block">
                                                        <span class="checkbox-custom"></span>
                                                        Infrastructure
                                                    </label>
                                                    <label class="checkbox-label mb-3">
                                                        <input type="checkbox" class="d-block">
                                                        <span class="checkbox-custom"></span>
                                                        Programs
                                                    </label>
                                                    <label class="checkbox-label mb-3">
                                                        <input type="checkbox" class="d-block">
                                                        <span class="checkbox-custom"></span>
                                                        Documents & Declaration
                                                    </label>
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label for="remarks" class="form-label">Remarks</label>
                                                    <textarea name="remarks" id="remarks" class="form-input form-control" rows="4"></textarea>
                                                </div>

                                                <div class="col-12 mb-3 text-center">
                                                    <button type="button" class="btn btn-primary">
                                                        <i class="fa fa-check"></i> Submit
                                                    </button>
                                                </div>

                                                <p class="mb-0">
                                                    <strong>Note:</strong>
                                                    If no discrepancy found in application, then application will be approved and LOR will be generated.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 col-12">
                                <x-forms.noting-form />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
    $(document).ready(function() {
        $(function() {
            // SmartWizard initialize
            $('#smartwizard').smartWizard({
                theme: "arrows",
                autoAdjustHeight: false,
                toolbar: {
                    position: 'bottom',
                    showNextButton: false,
                    showPreviousButton: false,
                },
            });
        });
    })

    $(document).on('click', '.btn_go_back', function() {
        $('#smartwizard').smartWizard("prev");
    })

    $(document).on('click', '.btn-next', function() {
        $('#smartwizard').smartWizard("next");
    })
</script>
@endsection