@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Job Titles"
                    description="Manage job titles, department assignments, status, and mail aliases.">
                    <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#createModal">
                        + Add New Job
                    </button>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 font-semibold text-gray-800 mb-0 whitespace-nowrap" style="margin-right:auto">
                                Filters</h6>
                            <x-table-controls :action="route('job_titles.index')" :export="true" :exportRoute="route('job_titles.export')" :saveRoute="route('job_titles.saveFilteredTable')"
                                :filters="[
                                    'department_id' => $departments->pluck('name', 'id')->toArray(),
                                    'status' => [
                                        'active' => 'Active',
                                        'inactive' => 'Inactive',
                                    ],
                                ]" :filterLabels="[
                                    'department_id' => 'Department',
                                    'status' => 'Status',
                                ]" />

                        </div>
                    </div>

                    <x-table :headers="['ID', 'Name', 'Department', 'Status', 'Mail Alias', 'Actions']" :paginator="$jobs" emptyMessage="No job titles found.">
                        @foreach ($jobs as $job)
                            <tr id="job-row-{{ $job->id }}">
                                <td class="ui-muted text-center">{{ $job->id }}</td>

                                <td class="ui-title text-center">
                                    {{ $job->name }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $job->department->name ?? '—' }}
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $job->status === 'active' ? 'success' : 'neutral' }}">
                                        {{ ucfirst($job->status) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @if ($job->mail_alias)
                                        <a href="mailto:{{ $job->mail_alias }}" class="ui-title text-decoration-none">
                                            {{ $job->mail_alias }}
                                        </a>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <button type="button" data-bs-toggle="modal"
                                            data-bs-target="#editModal{{ $job->id }}" title="Edit Job"
                                            style="border:none; background:transparent; padding:0;">
                                            <span class="table-action">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </span>
                                        </button>

                                        <button type="button" data-bs-toggle="modal"
                                            data-bs-target="#deleteModal{{ $job->id }}" title="Delete Job"
                                            style="border:none; background:transparent; padding:0;">
                                            <span class="table-action table-action--danger">
                                                <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                            </span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    @foreach ($jobs as $job)
        <div class="modal fade" id="editModal{{ $job->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('job_titles.update', $job->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Edit Job</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <div class="modal-form-grid">
                                <div class="modal-form-col-12">
                                    <label class="asset-label">Name</label>
                                    <input type="text" class="asset-input" name="name" value="{{ $job->name }}"
                                        required pattern="[A-Za-z0-9 ]+"
                                        title="Only letters, numbers, and spaces are allowed">
                                </div>

                                <div class="modal-form-col-12">
                                    <label class="asset-label">Sort</label>
                                    <input type="text" class="asset-input" name="sort" value="{{ $job->sort }}"
                                        required>
                                </div>

                                <div class="modal-form-col-12">
                                    <label class="asset-label">Mail Alias</label>
                                    <input type="text" class="asset-input" name="mail_alias"
                                        value="{{ $job->mail_alias }}"
                                        pattern="^[A-Za-z0-9.]+@[A-Za-z0-9.]+\.[A-Za-z]{2,}$"
                                        title="Please use only letters, numbers, and dots in a valid email format.">
                                </div>

                                <div class="modal-form-col-12">
                                    <label class="asset-label">Status</label>
                                    <select name="status" class="asset-select">
                                        <option value="active" {{ $job->status == 'active' ? 'selected' : '' }}>
                                            Active
                                        </option>
                                        <option value="inactive" {{ $job->status == 'inactive' ? 'selected' : '' }}>
                                            Inactive
                                        </option>
                                    </select>
                                </div>

                                <div class="modal-form-col-12">
                                    <label class="asset-label">Department</label>
                                    <select name="department_id" class="asset-select">
                                        <option value="">Select Department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}"
                                                {{ $job->department_id == $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="asset-btn asset-btn--primary">
                                Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deleteModal{{ $job->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg rounded-4">
                    <form action="{{ route('job_titles.destroy', $job->id) }}" method="POST">
                        @csrf
                        @method('DELETE')

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Delete Job</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-0">
                                Are you sure you want to delete
                                <strong>{{ $job->name }}</strong>?
                            </p>
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="btn btn-outline-danger">
                                Delete
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    <div class="modal fade" id="createModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <form action="{{ route('job_titles.store') }}" method="POST">
                    @csrf

                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title">Create Job Title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <div class="modal-form-grid">
                            <div class="modal-form-col-12">
                                <label class="asset-label">Name</label>
                                <input type="text" class="asset-input" name="name" value="{{ old('name') }}"
                                    required pattern="[A-Za-z0-9 ]+"
                                    title="Only letters, numbers, and spaces are allowed">
                            </div>

                            <div class="modal-form-col-12">
                                <label class="asset-label">Sort</label>
                                <input type="text" class="asset-input" name="sort" value="{{ old('sort') }}"
                                    required>
                            </div>

                            <div class="modal-form-col-12">
                                <label class="asset-label">Mail Alias</label>
                                <input type="email" class="asset-input" name="mail_alias"
                                    value="{{ old('mail_alias') }}" pattern="^[A-Za-z0-9.]+@[A-Za-z0-9.]+\.[A-Za-z]{2,}$"
                                    title="Please enter a valid email without unsupported special characters">
                            </div>

                            <div class="modal-form-col-12">
                                <label class="asset-label">Status</label>
                                <select name="status" class="asset-select">
                                    <option value="">Select Status</option>
                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>
                                        Active
                                    </option>
                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>
                                        Inactive
                                    </option>
                                </select>
                            </div>

                            <div class="modal-form-col-12">
                                <label class="asset-label">Department</label>
                                <select name="department_id" class="asset-select">
                                    <option value="">Select Department</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}"
                                            {{ old('department_id') == $department->id ? 'selected' : '' }}>
                                            {{ $department->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" class="asset-btn asset-btn--primary">
                            Create
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }

        .modal-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .modal-form-col-12 {
            grid-column: span 12 / span 12;
        }
    </style>
@endpush