@extends('school.layouts.app')

@section('content')
<div class="p-6 max-w-4xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="text-2xl font-black text-slate-800 tracking-tight">Department Setup</h3>
            <p class="text-sm text-slate-500">Manage the roles and departments for your staff members.</p>
        </div>
        <button onclick="openModal('add')" class="bg-indigo-600 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-indigo-700 transition-all shadow-md">
            <i class="fa-solid fa-plus mr-2"></i> Add New
        </button>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border-l-4 border-green-500 text-green-700 rounded-xl shadow-sm flex items-center gap-3">
            <i class="fa-solid fa-circle-check"></i>
            <span class="text-sm font-medium">{{ session('success') }}</span>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl shadow-sm flex items-center gap-3">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span class="text-sm font-medium">{{ session('error') }}</span>
        </div>
    @endif


    <!-- departments Table -->
    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <table class="w-full text-left">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase w-16">#</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase">Department Name</th>
                    <th class="p-4 text-xs font-bold text-slate-500 uppercase text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($departments as $index => $d)
                <tr class="hover:bg-slate-50 transition-all">
                    <td class="p-4 text-sm text-slate-400">{{ $index + 1 }}</td>
                    <td class="p-4 text-sm font-semibold text-slate-700">{{ $d->name }}</td>
                    <td class="p-4 text-right space-x-2">
                        <button onclick="openModal('edit', {{ $d->id }}, '{{ $d->name }}')" class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all">
                            <i class="fa-solid fa-pen-to-square"></i>
                        </button>
                        <form action="{{ route('school.staff.departments.delete', $d->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to delete this designation?')">
                            @csrf @method('DELETE')
                            <button class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-all">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="p-10 text-center text-slate-400">No designations found. Please add some.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- LUXURY MODAL for Add/Edit -->
<div id="designation-modal" class="fixed inset-0 z-50 hidden bg-black/60 backdrop-blur-sm items-center justify-center p-4">
    <div class="bg-white w-full max-w-md rounded-3xl shadow-2xl transform transition-all overflow-hidden">
        <div class="bg-indigo-600 p-6 text-white flex justify-between items-center">
            <h4 id="modal-title" class="text-lg font-bold">Add Designation</h4>
            <button onclick="closeModal()" class="text-white/80 hover:text-white"><i class="fa-solid fa-times"></i></button>
        </div>
        
            <form id="designation-form" method="POST" class="p-6 space-y-4">
            @csrf
            <div id="update-method" class="hidden">@method('PUT')</div>
            
            <div>
                <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Designation Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" id="designation-name" required 
                    class="uppercase-input w-full px-4 py-2 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all"
                    placeholder="e.g. ADMIN, ACADEMIC"
                    oninput="this.value = this.value.toUpperCase()">
            </div>

            <div class="flex justify-end gap-3 pt-4">
                <button type="button" onclick="closeModal()" class="px-4 py-2 text-sm font-bold text-slate-500 hover:text-slate-700">Cancel</button>
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-xl text-sm font-bold hover:bg-indigo-700 shadow-md">
                    Save Department
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function openModal(mode, id = null, name = '') {
        const modal = $('#designation-modal');
        const form = $('#designation-form');
        const title = $('#modal-title');
        const input = $('#designation-name');

        // 1. Clear any existing method fields to prevent "PUT" during "ADD"
        form.find('input[name="_method"]').remove();

        if (mode === 'add') {
            title.text('Add New Designation');
            input.val('');
            form.attr('action', "{{ route('school.staff.departments.store') }}");
            // No method field added, so it stays a pure POST request
        } else {
            title.text('Edit Designation');
            input.val(name);
            form.attr('action', `/school/staff/designations/${id}`);
            
            // 2. DYNAMICALLY add the PUT method only for editing
            form.append('<input type="hidden" name="_method" value="PUT">');
        }

        modal.removeClass('hidden').addClass('flex');
    }


    function closeModal() {
        $('#designation-modal').addClass('hidden').removeClass('flex');
    }

    // Close modal when clicking outside
    $(window).on('click', function(e) {
        if ($(e.target).is('#designation-modal')) closeModal();
    });
</script>
@endsection