@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('New Application'))

@section('content')
    <style>
        .emp-enothi-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-enothi-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-enothi-label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 6px;
        }
        .emp-enothi-hint {
            font-size: 0.8125rem;
            color: #64748b;
            padding: 0.85rem 1rem;
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            margin-bottom: 1.25rem;
        }
        .emp-enothi-form-section {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 12px;
            padding: 1.15rem;
            margin-bottom: 1rem;
        }
        .emp-enothi-form-section-title {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 0.85rem;
        }
        .emp-enothi-field-hint {
            font-size: 0.8125rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }
        .emp-enothi-confidential {
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 10px;
            padding: 0.85rem 1rem;
        }
    </style>

    <div class="container-fluid emp-enothi-wrap">
        <div class="row mt-3">
            <div class="col-12 col-xl-10 mx-auto">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('New application') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Submit an application or problem to management.') }}</p>
                    </div>
                    <a href="{{ route('employee.enothi.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-arrow-left mr-1"></i> {{ __('Back to list') }}
                    </a>
                </div>

                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-file-alt mr-1 text-muted"></i> {{ __('Application to management') }}
                    </div>
                    <div class="card-body">
                        <div class="emp-enothi-hint">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('Submit to management via approval hierarchy, or check confidential to send only to your selected recipient.') }}
                        </div>

                        @if($toRecipients->isEmpty())
                            <div class="alert alert-warning mb-0">
                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                {{ __('Application recipients are not configured yet. Please contact HR or administration.') }}
                            </div>
                        @else
                            <form method="post" action="{{ route('employee.enothi.store') }}" enctype="multipart/form-data">
                                @csrf

                                <div class="emp-enothi-form-section">
                                    <div class="emp-enothi-form-section-title">{{ __('Recipient') }}</div>
                                    <div class="form-group mb-0">
                                        <label class="emp-enothi-label" for="enothi_to_staff_id">{{ __('To') }} / {{ __('প্রাপক') }} <span class="text-danger">*</span></label>
                                        <select name="to_staff_id" id="enothi_to_staff_id" class="form-control select2 @error('to_staff_id') is-invalid @enderror" required data-placeholder="{{ __('Select recipient') }}">
                                            <option value="">{{ __('Select recipient') }}</option>
                                            @foreach($toRecipients as $recipient)
                                                <option value="{{ $recipient->id }}" @selected((string) old('to_staff_id') === (string) $recipient->id)>
                                                    {{ \App\Services\Enothi\EnothiRecipientService::optionLabel($recipient) }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="emp-enothi-field-hint">{{ __('Select the person you are submitting this application to.') }}</div>
                                        @error('to_staff_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                @if(!empty($confidentialOptionEnabled) && $confidentialOptionEnabled)
                                    <div class="emp-enothi-confidential mb-3">
                                        <div class="form-check mb-0">
                                            <input type="checkbox" name="direct_to_only" value="1" class="form-check-input" id="direct_to_only" @checked(old('direct_to_only'))>
                                            <label class="form-check-label font-weight-bold" for="direct_to_only">
                                                {{ __('Confidential — only recipient (To) will review') }} / {{ __('গোপনীয় — শুধু প্রাপক দেখবেন') }}
                                            </label>
                                            <div class="emp-enothi-field-hint mb-0 mt-1">
                                                {{ __('When checked, approval hierarchy is skipped. Only the selected To recipient and you can access this application.') }}
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="emp-enothi-form-section">
                                    <div class="emp-enothi-form-section-title">{{ __('Application details') }}</div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label class="emp-enothi-label" for="enothi_category_id">{{ __('Category') }} <span class="text-danger">*</span></label>
                                            <select name="enothi_category_id" id="enothi_category_id" class="form-control @error('enothi_category_id') is-invalid @enderror" required>
                                                @foreach($categoryIdOptions as $id => $label)
                                                    <option value="{{ $id }}" @selected(old('enothi_category_id') == $id)>{{ $label }}</option>
                                                @endforeach
                                            </select>
                                            @error('enothi_category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label class="emp-enothi-label" for="priority">{{ __('Priority') }}</label>
                                            <select name="priority" id="priority" class="form-control @error('priority') is-invalid @enderror">
                                                @foreach($priorities as $key => $label)
                                                    <option value="{{ $key }}" @selected(old('priority', 'normal') === $key)>{{ $label }}</option>
                                                @endforeach
                                            </select>
                                            <div class="emp-enothi-field-hint">{{ __('Urgent applications get a shorter SLA deadline.') }}</div>
                                            @error('priority')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="emp-enothi-label" for="subject">{{ __('Subject') }} <span class="text-danger">*</span></label>
                                        <input type="text"
                                               name="subject"
                                               id="subject"
                                               class="form-control @error('subject') is-invalid @enderror"
                                               value="{{ old('subject') }}"
                                               required
                                               maxlength="255"
                                               placeholder="{{ __('Brief subject of your application') }}">
                                        @error('subject')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="emp-enothi-label" for="body">{{ __('Application details') }} <span class="text-danger">*</span></label>
                                        <textarea name="body"
                                                  id="body"
                                                  class="form-control @error('body') is-invalid @enderror"
                                                  rows="6"
                                                  required
                                                  maxlength="10000"
                                                  placeholder="{{ __('Describe your problem or request in detail') }}">{{ old('body') }}</textarea>
                                        @error('body')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div class="emp-enothi-form-section">
                                    <div class="emp-enothi-form-section-title">{{ __('Attachments & submission') }}</div>
                                    <div class="form-group">
                                        <label class="emp-enothi-label" for="attachments">{{ __('Attachments') }} <span class="text-muted font-weight-normal">({{ __('optional') }})</span></label>
                                        <input type="file"
                                               name="attachments[]"
                                               id="attachments"
                                               class="form-control-file @error('attachments') is-invalid @enderror @error('attachments.*') is-invalid @enderror"
                                               multiple
                                               accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                                        <div class="emp-enothi-field-hint">{{ __('PDF, images, or Word documents, max 5MB each.') }}</div>
                                        @error('attachments')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                        @error('attachments.*')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" name="submit_now" value="1" class="form-check-input" id="submit_now" @checked(old('submit_now', true))>
                                        <label class="form-check-label" for="submit_now">{{ __('Submit immediately to management') }}</label>
                                    </div>
                                </div>

                                <div class="d-flex flex-wrap align-items-center">
                                    <button type="submit" class="btn btn-primary mr-2 mb-2">
                                        <i class="fas fa-paper-plane mr-1"></i> {{ __('Submit') }}
                                    </button>
                                    <a href="{{ route('employee.enothi.index') }}" class="btn btn-outline-secondary mb-2">{{ __('Cancel') }}</a>
                                </div>
                            </form>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function () {
            $('#enothi_to_staff_id').select2({
                width: '100%',
                placeholder: @json(__('Select recipient'))
            });
        });
    </script>
@endsection