@extends('setting.nav')

@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <form action="{{ route('employee.assignToHead') }}" method="POST" class="mt-4">
        @csrf
        <div class="d-flex gap-3 align-items-center">
            {{-- Select box with search --}}
            <label for="">Select Employee</label>
            <select name="employee_ids[]" id="employee_ids" class="form-select" multiple style="width: 400px;" required>
                @foreach ($extraUsers as $user)
                    <option value="{{ $user->id }}">{{ $user->email }}</option>
                @endforeach
            </select>

            {{-- Hidden field for head ID --}}
            <input type="hidden" name="head_id" value="{{ $departmentHead->id }}">

            {{-- Submit button --}}
            <button type="submit" class="btn btn-success">
                <i class="bi bi-check-circle"></i> Assign Selected
            </button>
        </div>
    </form>



    <div class="card border-0 shadow-sm mt-3" style="border-radius: 1rem;">
        <div class="card-header d-flex justify-content-between align-items-center text-white"
            style="position:Sticky; top:0; border-radius: 1rem 1rem 0 0; background: linear-gradient(135deg, #4e73df, #1cc88a); font-size: 1.25rem; font-weight: 600;">
            {{-- <span>{{ $type }}</span> --}}
            <h4>
                Employees under Department Head:
                {{ $departmentHead->email ?? '-' }}
                ({{ $departmentHead->department_name ?? '' }})
            </h4>
            <div style="width: 250px;">
                <input type="text" id="customSearch" class="form-control" placeholder="Search mails..."
                    style="border-radius: 30px; padding: 0.4rem 1rem;">
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">

                {{-- Optional custom search --}}
                {{-- <div class="mb-3">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search...">
                </div> --}}

                <table id="mails-table" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Email</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($employeesUnderHead as $index => $emp)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $emp->email }}</td>
                                <td>
                                    {{-- Delete Icon --}}
                                    <a href="{{ route('employee.remove', $emp->id) }}" class="text-danger"
                                        onclick="return confirm('Are you sure you want to delete this employee?')">
                                        <i class="bi bi-trash-fill"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#employee_ids').select2({
                placeholder: "Select employees...",
                width: 'resolve'
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            var table = $('#mails-table').DataTable({
                ordering: true,
                info: true,
                pagingType: 'full_numbers',
                language: {
                    search: "",
                    searchPlaceholder: "Search..."
                },
                dom: 't<"d-flex justify-content-between align-items-center p-3"p>'
            });

            $('#customSearch').on('keyup', function() {
                table.search(this.value).draw();
            });

            setTimeout(function() {
                $('.dataTables_paginate .paginate_button').addClass('btn btn-sm btn-outline-secondary mx-1')
                    .css({
                        borderRadius: '30px'
                    });
            }, 100);
        });
    </script>
@endsection