@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4 mb-3">
        <div class="card-body p-3">
            <div class="d-flex align-items-center gap-2">
                <button class="btn btn-secondary" onclick="history.back()">
                    <i class="fas fa-arrow-left me-2"></i>Back
                </button>
                @if ($authorize->edit == '1' && $list->isactive == 1)
                    <button class="btn btn-primary" style="display: none;" id="{{ $dmenu }}-save"
                        onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                        <i class="fas fa-save me-2"></i>Save
                    </button>
                    <button class="btn btn-warning" id="{{ $dmenu }}-edit">
                        <i class="fas fa-edit me-2"></i>Edit
                    </button>
                @endif
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                @php
                    $primary = $list->id;
                @endphp
                <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . encrypt($primary)) }}"
                    id="{{ $dmenu }}-form" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card shadow-sm">
                        <div class="card-header pb-3 bg-gradient-primary">
                            <div class="d-flex align-items-center">
                                <div class="icon icon-shape bg-white shadow text-center border-radius-md me-3">
                                    <i class="fas fa-edit text-warning text-lg opacity-10"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0 text-white">Edit Training Needs Analysis Request</h5>
                                    <p class="text-sm text-white opacity-8 mb-0">Modify the training request details</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-4">
                            {{-- alert error --}}
                            @if ($errors->any())
                                <div class="alert alert-validation alert-dismissible fade show mb-4" role="alert">
                                    <div class="d-flex gap-3">
                                        <div class="alert-icon-wrap">
                                            <i class="fas fa-times-circle"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="alert-title mb-1">Please fix the following errors before submitting:</p>
                                            <ul class="alert-list mb-0">
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <button type="button" class="btn-close btn-close-white align-self-start" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                </div>
                            @endif

                            <div class="row g-4">
                                @foreach ($table_header as $field)
                                    @php
                                        $value = $list->{$field->field} ?? old($field->field);
                                        $fieldId = $field->field;
                                    @endphp
                                    <div class="col-md-{{ $field->type == 'text' ? '12' : '6' }}">
                                        <div class="form-group">
                                            <label class="form-label text-sm font-weight-bold text-dark" for="{{ $fieldId }}">
                                                {{ $field->alias }}
                                                @if (Str::contains($field->validate, 'required'))
                                                    <span class="text-danger">*</span>
                                                @endif
                                            </label>

                                            @if ($field->type == 'text')
                                                {{-- Textarea --}}
                                                <textarea class="form-control @error($fieldId) is-invalid @enderror"
                                                    id="{{ $fieldId }}"
                                                    name="{{ $fieldId }}"
                                                    rows="4"
                                                    disabled
                                                    placeholder="Enter {{ strtolower($field->alias) }}"
                                                    {{ Str::contains($field->validate, 'required') ? 'required' : '' }}>{{ $value }}</textarea>
                                            @elseif ($field->type == 'date')
                                                {{-- Date Input --}}
                                                <input type="date"
                                                    class="form-control @error($fieldId) is-invalid @enderror"
                                                    id="{{ $fieldId }}"
                                                    name="{{ $fieldId }}"
                                                    value="{{ $value }}"
                                                    disabled
                                                    {{ Str::contains($field->validate, 'required') ? 'required' : '' }}>
                                            @elseif ($field->type == 'enum' && $field->query)
                                                {{-- Select/Dropdown --}}
                                                @php
                                                    $options = DB::select($field->query);
                                                @endphp
                                                <select class="form-select @error($fieldId) is-invalid @enderror"
                                                    id="{{ $fieldId }}"
                                                    name="{{ $fieldId }}"
                                                    disabled
                                                    {{ Str::contains($field->validate, 'required') ? 'required' : '' }}>
                                                    <option value="">-- Select {{ $field->alias }} --</option>
                                                    @foreach ($options as $opt)
                                                        @php
                                                            $optArray = array_values((array) $opt);
                                                        @endphp
                                                        <option value="{{ $optArray[0] }}" {{ $value == $optArray[0] ? 'selected' : '' }}>
                                                            {{ $optArray[1] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @else
                                                {{-- Default Text Input --}}
                                                <input type="text"
                                                    class="form-control @error($fieldId) is-invalid @enderror"
                                                    id="{{ $fieldId }}"
                                                    name="{{ $fieldId }}"
                                                    value="{{ $value }}"
                                                    disabled
                                                    placeholder="Enter {{ strtolower($field->alias) }}"
                                                    maxlength="{{ $field->length ?: 255 }}"
                                                    {{ Str::contains($field->validate, 'required') ? 'required' : '' }}>
                                            @endif

                                            @error($fieldId)
                                                <div class="invalid-feedback d-block">
                                                    <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                                </div>
                                            @enderror

                                            @if ($field->note)
                                                <small class="text-muted d-block mt-1">
                                                    <i class="fas fa-info-circle me-1"></i>{{ $field->note }}
                                                </small>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>
    .card {
        border-radius: 0.75rem;
        border: none;
    }

    .card-header.bg-gradient-primary {
        background: linear-gradient(87deg, #028284 0, #01a6a9 100%) !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        padding: 1.5rem;
    }

    .icon-shape {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
    }

    .form-control, .form-select {
        border: 1px solid #d2d6da;
        border-radius: 0.5rem;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: #028284;
        box-shadow: 0 0 0 2px rgba(2, 130, 132, 0.1);
    }

    .form-label {
        margin-bottom: 0.5rem;
        color: #344767;
        font-size: 0.875rem;
    }

    .btn-primary {
        background: linear-gradient(87deg, #028284 0, #01a6a9 100%);
        border: none;
        padding: 0.625rem 1.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(2, 130, 132, 0.3);
    }

    .btn-warning {
        background-color: #fb6340;
        border: none;
        padding: 0.625rem 1.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #fff;
    }

    .btn-warning:hover {
        background-color: #fa3a0e;
        color: #fff;
    }

    .btn-secondary {
        background-color: #8392AB;
        border: none;
        padding: 0.625rem 1.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
    }

    .btn-secondary:hover {
        background-color: #6c7a8d;
    }

    textarea.form-control {
        resize: vertical;
        min-height: 100px;
    }

    .invalid-feedback {
        font-size: 0.8rem;
        margin-top: 0.375rem;
    }

    .alert {
        border-radius: 0.75rem;
        border: none;
    }

    /* Validation alert */
    .alert-validation {
        background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
        border: 1px solid #f5c6cb;
        border-left: 4px solid #dc3545;
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        color: #721c24;
    }

    .alert-validation .alert-icon-wrap {
        font-size: 1.25rem;
        color: #dc3545;
        line-height: 1.4;
        flex-shrink: 0;
    }

    .alert-validation .alert-title {
        font-weight: 600;
        font-size: 0.875rem;
        color: #842029;
    }

    .alert-validation .alert-list {
        padding-left: 1.1rem;
        font-size: 0.8125rem;
        color: #6b1c24;
        line-height: 1.7;
    }

    .alert-validation .alert-list li::marker {
        color: #dc3545;
    }

    .alert-validation .btn-close {
        filter: none;
        opacity: 0.5;
        font-size: 0.75rem;
        padding: 0.25rem;
    }

    .alert-validation .btn-close:hover {
        opacity: 1;
    }

    .form-control:disabled, .form-select:disabled {
        background-color: #f8f9fa;
        opacity: 0.8;
    }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        // Edit button functionality
        $('#{{ $dmenu }}-edit').click(function() {
            $('input, textarea, select').removeAttr('disabled');
            $('#{{ $dmenu }}-save').show();
            $(this).hide();
        });
    });
</script>
@endpush