@extends('layouts.app',['path'=>'letters.template'])
@section('title', 'Add Letter Template - HRMS')

@section('content')
    <div class="content" data-color="primary">
        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Letter Templates</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            Reports
                        </li>
                        <li class="breadcrumb-item">
                            HR
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Letter Templates</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- /Breadcrumb -->

        @include('partials.new_alerts')

        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Add Letter Template</h4>
            </div>
            <div class="card-body">
                <form id="letterTemplateForm" method="POST" action="{{ route('letters.template.store') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="template_type" class="form-label">Template Type <span class="text-danger">*</span></label>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="flex-grow-1">
                                        <select class="select form-control" id="template_type" name="template_type">
                                            <option value="">Select</option>
                                            @php
                                                $staticTypes = ['Appointment Letter', 'Bonus Letter', 'Confirmation Letter', 'Experience Letter', 'Increment Letter', 'Service Letter', 'Welcome Letter'];
                                                $allTypes = array_unique(array_merge($staticTypes, $templateTypes ?? []));
                                                sort($allTypes);
                                            @endphp
                                            @foreach($allTypes as $type)
                                                <option value="{{ $type }}" {{ old('template_type') == $type ? 'selected' : '' }}>{{ $type }}</option>
                                            @endforeach
                                        </select>
                                        <input type="text" class="form-control" id="template_type_custom" placeholder="Enter custom template type" style="display: none;" value="{{ old('template_type') }}">
                                    </div>
                                    <button type="button" class="btn btn-outline-primary" id="toggleTemplateType">
                                        <i class="ti ti-edit"></i> Custom
                                    </button>
                                </div>
                                <span class="error-validation" id="template_type-error"></span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="content" class="form-label">Letter Content <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="content" name="template_content">{{ old('template_content') }}</textarea>
                                <span class="error-validation" id="template_content-error"></span><br>
                                <small class="form-text text-muted">
                                    Available placeholders: 
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{employee_name}')">employee_name</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{father_name}')">father_name</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{employee_no}')">employee_no</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{cnic_number}')">cnic_number</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{designation}')">designation</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{department}')">department</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{joining_date}')">joining_date</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{salary}')">salary</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{location}')">location</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{effective_date}')">effective_date</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{current_date}')">current_date</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{last_working_day}')">last_working_day</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{bonus_amount}')">bonus_amount</span>
                                    <span class="badge bg-secondary cursor-pointer" onclick="insertPlaceholder('{address}')">address</span>
                                </small>
                            </div>
                        </div>
                    </div>
    
                    <div class="modal-footer mt-2" bis_skin_checked="1">
                        @can('letter_template.read')
                            <a href="{{ route('letters.template') }}" class="btn btn-light border me-2">
                                <i class="ti ti-x me-2"></i>Cancel
                            </a>
                        @endcan
                        @can('letter_template.create')
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-check me-2"></i>Save
                            </button>
                        @endcan
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.tiny.cloud/1/oz3nbjo57360s7rqle4rw1vg7tvxd64z50vjin3rvd8gg00p/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="{{ asset('assets/validation/create-letter-template.js?v='.config('api.version')) }}"></script>
@endpush