@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="Departments"
                    description="Manage departments, mail aliases, parent structure, and department heads.">
                    <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#createModal">
                        + Add New Department
                    </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('departments.index')" :export="true"
                                :exportRoute="route('departments.export')"
                                :saveRoute="route('departments.saveFilteredTable')" />
                        </div>
                    </div>


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

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

                                <td class="text-center">
                                    @if ($department->mail_alias)
                                        <a href="mailto:{{ $department->mail_alias }}" class="ui-title text-decoration-none">
                                            {{ $department->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{{ $department->id }}" title="Edit Department"
                                            style="border:none; background:transparent; padding:0;">
                                            <span class="table-action">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </span>
                                        </button>

                                        @if ($department->can_delete != 'no')
                                            <button type="button" data-bs-toggle="modal"
                                                data-bs-target="#deleteModal{{ $department->id }}" title="Delete Department"
                                                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>
                                        @else
                                            <button type="button" disabled title="Delete Disabled"
                                                style="border:none; background:transparent; padding:0; cursor:not-allowed;">
                                                <span class="table-action table-action--disabled">
                                                    <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                                </span>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    @foreach ($departments as $department)
        <div class="modal fade" id="editModal{{ $department->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('departments.update', $department->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Edit Department</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="{{ $department->name }}"
                                        pattern="^[A-Za-z0-9 ]+$" title="Only letters, numbers, and spaces are allowed">
                                </div>

                                <div class="modal-form-col-12">
                                    <label class="asset-label">Mail Alias</label>
                                    <input type="text" class="asset-input" name="mail_alias"
                                        value="{{ $department->mail_alias }}"
                                        title="Only letters and numbers are allowed, with a single @ in between.">
                                </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{{ $department->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('departments.destroy', $department->id) }}" method="POST">
                        @csrf
                        @method('DELETE')

                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Delete Department</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>{{ $department->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('departments.store') }}" method="POST">
                    @csrf

                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title">Create Department</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">Mail Alias</label>
                                <input type="email" class="asset-input" name="mail_alias" value="{{ old('mail_alias') }}"
                                    required title="Only letters and numbers are allowed, with a single @ in between.">
                            </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;
        }

        .table-action--disabled {
            border-color: #e5e7eb;
            color: #9ca3af;
            background: #f9fafb;
        }

        .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