@extends('layouts.app', ['path' => 'attendance.assignments'])

@section('content')
    <div class="content" data-color="primary">
        <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">Assign Employees</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">Attendance</li>
                        <li class="breadcrumb-item active" aria-current="page">Scheduling</li>
                    </ol>
                </nav>
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
                <div class="mb-2">
                    <a href="{{ route('attendance.scheduling.index') }}" class="btn btn-outline-primary">Back to List</a>
                </div>
            </div>
        </div>

        @include('partials.alerts')

        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                <h5>Assignment Details</h5>
            </div>
            <div class="card-body">
                <form id="assign-employees-form" method="post" action="#">
                    @csrf
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Select Schedule</label>
                            <select name="schedule_id" class="form-select">
                                <option value="">Select</option>
                                <option value="1">Rotation Month - Shift A</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Shift / Time Slot</label>
                            <select name="shift_id" class="form-select">
                                <option value="">Select</option>
                                <option value="1">Shift A</option>
                                <option value="2">Shift B</option>
                            </select>
                        </div>
                    </div>

                    <!-- 🔹 Filter Section -->
                    <div x-data="assignEmployees()" class="mb-4">
                        <div class="border rounded p-3 bg-light mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                                <h6 class="fw-bold text-primary mb-0">Filter Employees</h6>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-primary btn-sm" @click="applyFilter()">Apply
                                        Filter</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                        @click="resetFilter()">Reset</button>
                                </div>
                            </div>

                            <div class="row g-3">
                                <!-- 🔹 Organization Profile -->


                                <!-- 🔹 Office Locations -->
                                <div class="col-md-3">
                                    <label class="form-label">Office Locations</label>
                                    <select x-model="filterOfficeLocation" class="form-select select2">
                                        <option value="">All Locations</option>
                                        <option value="Lahore">Lahore</option>
                                        <option value="Karachi">Karachi</option>
                                        <option value="Islamabad">Islamabad</option>
                                    </select>
                                </div>

                                <!-- 🔹 Job Levels -->
                                <div class="col-md-3">
                                    <label class="form-label">Job Levels</label>
                                    <select x-model="filterJobLevel" class="form-select select2">
                                        <option value="">All Levels</option>
                                        <option value="Junior">Junior</option>
                                        <option value="Mid">Mid</option>
                                        <option value="Senior">Senior</option>
                                    </select>
                                </div>

                                <!-- 🔹 Departments -->
                                <div class="col-md-3">
                                    <label class="form-label">Departments</label>
                                    <select x-model="filterDepartment" class="form-select select2">
                                        <option value="">All Departments</option>
                                        <option value="HR">HR</option>
                                        <option value="IT">IT</option>
                                        <option value="Sales">Sales</option>
                                    </select>
                                </div>

                                <!-- 🔹 Designations -->
                                <div class="col-md-3">
                                    <label class="form-label">Designations</label>
                                    <select x-model="filterDesignation" class="form-select select2">
                                        <option value="">All Designations</option>
                                        <option value="Manager">Manager</option>
                                        <option value="Developer">Developer</option>
                                        <option value="Executive">Executive</option>
                                    </select>
                                </div>

                                <!-- 🔹 Qualification Levels -->
                                <div class="col-md-3">
                                    <label class="form-label">Qualification Levels</label>
                                    <select x-model="filterQualificationLevel" class="form-select select2">
                                        <option value="">All Levels</option>
                                        <option value="Bachelors">Bachelors</option>
                                        <option value="Masters">Masters</option>
                                        <option value="PhD">PhD</option>
                                    </select>
                                </div>

                                <!-- 🔹 Employment Types -->
                                <div class="col-md-3">
                                    <label class="form-label">Employment Types</label>
                                    <select x-model="filterEmploymentType" class="form-select select2">
                                        <option value="">All Types</option>
                                        <option value="Full-time">Full-time</option>
                                        <option value="Part-time">Part-time</option>
                                        <option value="Contract">Contract</option>
                                    </select>
                                </div>

                                <!-- 🔹 Status -->
                                <div class="col-md-3">
                                    <label class="form-label">Role</label>
                                    <select x-model="filterRole" class="form-select select2">
                                        <option value="">All Role</option>
                                        <option value="Active">Manager</option>
                                        <option value="Inactive">HR</option>
                                    </select>
                                </div>
                            </div>
                        </div>



                        <!-- 🔹 Employee Transfer Section -->
                        <div class="row g-3">
                            <!-- Available Employees -->
                            <div class="col-md-5">
                                <label class="form-label fw-semibold">Available Employees</label>
                                <div class="border rounded p-3 h-400 overflow-auto bg-white" @dragover.prevent
                                    @drop="handleDrop($event, 'available')">
                                    <div class="row g-2">
                                        <template x-for="employee in filteredAvailable" :key="employee.id">
                                            <div class="col-6">
                                                <div class="employee-card border p-2 rounded d-flex align-items-center gap-2"
                                                    draggable="true" @dragstart="handleDragStart(employee, 'available')"
                                                    :class="selectedAvailable.includes(employee.id) ?
                                                        'border-primary border-2 bg-light-blue' : ''"
                                                    @click="toggleSelect('available', employee.id)">
                                                    <img :src="employee.avatar" class="rounded-circle"
                                                        style="width:40px; height:40px;" alt="Avatar">
                                                    <div class="flex-grow-1">
                                                        <div class="fw-bold" x-text="employee.name"></div>
                                                        <div class="text-muted small"
                                                            x-text="employee.role + ' - ' + employee.department"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>

                            <!-- Buttons -->
                            <div class="col-md-2 d-flex flex-column justify-content-center align-items-center gap-2">
                                <button type="button" class="btn btn-primary btn-sm"
                                    @click="transferSelected('available')">→</button>
                                <button type="button" class="btn btn-primary btn-sm"
                                    @click="transferSelected('assigned')">←</button>
                                <button type="button" class="btn btn-outline-primary btn-sm"
                                    @click="transferAll('available')">≫</button>
                                <button type="button" class="btn btn-outline-primary btn-sm"
                                    @click="transferAll('assigned')">≪</button>
                            </div>

                            <!-- Assigned Employees -->
                            <div class="col-md-5">
                                <label class="form-label fw-semibold">Assigned Employees</label>
                                <div class="border rounded p-3 h-400 overflow-auto bg-white" @dragover.prevent
                                    @drop="handleDrop($event, 'assigned')">
                                    <div class="row g-2">
                                        <template x-for="employee in filteredAssigned" :key="employee.id">
                                            <div class="col-6">
                                                <div class="employee-card border p-2 rounded d-flex align-items-center gap-2"
                                                    draggable="true" @dragstart="handleDragStart(employee, 'assigned')"
                                                    :class="selectedAssigned.includes(employee.id) ?
                                                        'border-primary border-2 bg-light-blue' : ''"
                                                    @click="toggleSelect('assigned', employee.id)">
                                                    <img :src="employee.avatar" class="rounded-circle"
                                                        style="width:40px; height:40px;" alt="Avatar">
                                                    <div class="flex-grow-1">
                                                        <div class="fw-bold" x-text="employee.name"></div>
                                                        <div class="text-muted small"
                                                            x-text="employee.role + ' - ' + employee.department"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="{{ route('attendance.scheduling.index') }}" class="btn btn-light me-3"><i
                                class="ti ti-x me-2"></i>Cancel</a>
                        <button type="submit" class="btn btn-primary me-3"><i
                                class="ti ti-check me-2"></i>Assign</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script src="{{ asset('assets/js/createAssingEmployee.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endsection