@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    {{-- Top Action Bar --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Back</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-edit me-2"></i>Edit TNA</h5>
                        <p class="text-sm text-muted mb-0">Edit TNA settings</p>
                    </div>
                    <div class="card-body">
                        {{-- alert --}}
                        @include('components.alert')

                        <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST">
                            @csrf
                            @method('PUT')

                            {{-- Info TNA (readonly) --}}
                            <div class="row mb-4">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold text-muted small">TNA ID</label>
                                    <p class="mb-0 fs-6 fw-bold text-primary">{{ $list->id }}</p>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold text-muted small">Department</label>
                                    <p class="mb-0 fs-6">{{ $list->department ?: '-' }}</p>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold text-muted small">Section</label>
                                    <p class="mb-0 fs-6">{{ $list->section ?: '-' }}</p>
                                </div>
                            </div>

                            {{-- Editable: Training Name --}}
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label fw-bold">Training Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name_trn" value="{{ $list->name_trn }}" required>
                                    <small class="text-muted">Training name to be used</small>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            {{-- Editable Fields --}}
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Training Type <span class="text-danger">*</span></label>
                                    <select class="form-select" name="type_training" required>
                                        <option value="reguler" {{ $list->type_training == 'reguler' ? 'selected' : '' }}>Regular</option>
                                        <option value="academy" {{ $list->type_training == 'academy' ? 'selected' : '' }}>Academy</option>
                                    </select>
                                    <small class="text-muted">Select training type</small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">With Score</label>
                                    <div class="form-check form-switch mt-2">
                                        <input class="form-check-input" type="checkbox" name="with_score" value="1"
                                            {{ $list->with_score ? 'checked' : '' }} style="width: 3em; height: 1.5em;">
                                        <label class="form-check-label ms-2">Enable scoring</label>
                                    </div>
                                    <small class="text-muted">Check if this training requires evaluation</small>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            {{-- Submit Button --}}
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-secondary" onclick="history.back()">
                                    <i class="fas fa-times me-1"></i> Cancel
                                </button>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-save me-1"></i> Save
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Info Panel --}}
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="mb-0 text-white"><i class="fas fa-info-circle me-2"></i>Information</h6>
                    </div>
                    <div class="card-body">
                        <p class="text-sm mb-2">
                            <strong>Training Type:</strong><br>
                            <span class="text-muted">
                                - <strong>Regular:</strong> Standard training<br>
                                - <strong>Academy:</strong> Special academy training
                            </span>
                        </p>
                        <hr>
                        <p class="text-sm mb-0">
                            <strong>With Score:</strong><br>
                            <span class="text-muted">
                                When enabled, participants will receive evaluation after training completion.
                            </span>
                        </p>
                    </div>
                </div>

                {{-- Status Info --}}
                <div class="card mt-3">
                    <div class="card-header">
                        <h6 class="mb-0">TNA Status</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless mb-0">
                            <tr>
                                <td width="50%">Status</td>
                                <td>
                                    @if ($list->status == 'draft')
                                        <span class="badge bg-secondary">Draft</span>
                                    @elseif ($list->status == 'aktif')
                                        <span class="badge bg-primary">Aktif</span>
                                    @else
                                        <span class="badge bg-success">Finish</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>Approval HRD</td>
                                <td>
                                    @if ($list->approval_hrd == 'approved')
                                        <span class="badge bg-success"><i class="fas fa-check me-1"></i>Approved</span>
                                    @else
                                        <span class="badge bg-warning text-white"><i class="fas fa-clock me-1"></i>Pending</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>Approval Atasan</td>
                                <td>
                                    @if ($list->approval_atasan == 'approved')
                                        <span class="badge bg-success"><i class="fas fa-check me-1"></i>Approved</span>
                                    @else
                                        <span class="badge bg-warning text-white"><i class="fas fa-clock me-1"></i>Pending</span>
                                    @endif
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>
    .card {
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    .form-check-input:checked {
        background-color: #028284;
        border-color: #028284;
    }
</style>
@endpush