@extends('layouts.app', ['path' => 'leave.types'])

@section('content')
{{-- @can('payroll_structures.assign_employee|payroll_structures.view_assign_employee') --}}
    
    <div class="content">

        <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 to Leave Type</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">Leaves</li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('leave.types.index') }}">Leave Types</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Assign Employees</li>
                    </ol>
                </nav>
            </div>
        </div>

        @include('partials.new_alerts')

        <div class="card">
            <div class="card-header">
                <h5 class="mb-2">Employee Assignment</h5>
                <p class="text-muted mb-0">Select employees to assign to this leave type</p>
            </div>
            <div class="card-body">
                <!-- Filters Section -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="mb-3">Filter Employees</h6>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="employee_type" class="form-label">Employee Type</label>
                        <select class="form-select select2" id="employee_type" name="employee_type">
                            <option value="">Select</option>
                            @foreach($employeeTypes as $employeeType)
                                <option value="{{ $employeeType['id'] }}">{{ $employeeType['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="department" class="form-label">Department</label>
                        <select class="form-select select2" id="department" name="department">
                            <option value="">Select</option>
                            @foreach($departments as $department)
                                <option value="{{ $department['id'] }}">{{ $department['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="designation" class="form-label">Designation</label>
                        <select class="form-select select2" id="designation" name="designation">
                            <option value="">Select</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="location" class="form-label">Location</label>
                        <select class="form-select select2" id="location" name="location">
                            <option value="">Select</option>
                            @foreach($locations as $location)
                                <option value="{{ $location['id'] }}">{{ $location['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="button" class="btn btn-primary" id="applyFilters">
                            <i class="ti ti-filter me-2"></i>Apply Filters
                        </button>
                        <button type="button" class="btn btn-outline-secondary ms-2" id="clearFilters">
                            <i class="ti ti-refresh me-2"></i>Clear Filters
                        </button>
                    </div>
                </div>

                <!-- Employee Selection Section -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">Select Employees</h6>
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-primary me-2" id="selectAll">
                                    <i class="ti ti-check me-1"></i>Select All
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="deselectAll">
                                    <i class="ti ti-x me-1"></i>Deselect All
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <form action="{{ route('leave.types.assignment.store', $id) }}" method="POST" id="assignmentForm">
                    @csrf
                    <!-- Employee List -->
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th width="50">
                                        <input type="checkbox" class="form-check-input" id="selectAllCheckbox">
                                    </th>
                                    <th>Employee</th>
                                    <th>Employee No</th>
                                    <th>Department</th>
                                    <th>Designation</th>
                                    <th>Location</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            {{-- Already Assigned Employees --}}
                            <tbody id="assignedEmployees">
                                @foreach($assignedEmployees as $employee)
                                    <tr class="employee-row">
                                        <td>
                                            <input type="checkbox" class="form-check-input employee-checkbox" name="selected_employees[]" value="{{ $employee['id'] }}" checked>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($employee['profile_image'])
                                                    <img src="data:image/png;base64,{{ $employee['profile_image'] }}"  class="avatar avatar-md img-fluid rounded-circle object-fit-cover" alt="img">
                                                @else
                                                    <i class="avatar avatar-md ti ti-photo text-gray-2 fs-16"></i>
                                                @endif
                                                <div class="ms-2">
                                                    <a class="mb-0">{{ $employee['name'] }}</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $employee['employee_no'] }}</td>
                                        <td>{{ $employee['department']['name'] ?? '' }}</td>
                                        <td>{{ $employee['designation']['name'] ?? '' }}</td>
                                        <td>{{ $employee['office_location']['name'] ?? '' }}</td>
                                        <td>
                                            @if($employee['status'])
                                                <span class="badge badge-success">
                                                    Active
                                                </span>
                                            @else
                                                <span class="badge badge-danger">
                                                    Inactive
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        
                            {{-- Unassigned Employees --}}
                            <tbody id="otherEmpployees">
                                @foreach($employees as $employee)
                                    <tr class="employee-row">
                                        <td>
                                            <input type="checkbox" class="form-check-input employee-checkbox" name="selected_employees[]" value="{{ $employee['id'] }}">
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($employee['profile_image'])
                                                    <img src="data:image/png;base64,{{ $employee['profile_image'] }}" class="avatar avatar-md img-fluid rounded-circle object-fit-cover" alt="img">
                                                @else
                                                    <i class="avatar avatar-md ti ti-photo text-gray-2 fs-16"></i>
                                                @endif
                                                <div class="ms-2">
                                                    <a class="mb-0">{{ $employee['name'] }}</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $employee['employee_no'] }}</td>
                                        <td>{{ $employee['department']['name'] ?? '' }}</td>
                                        <td>{{ $employee['designation']['name'] ?? '' }}</td>
                                        <td>{{ $employee['office_location']['name'] ?? '' }}</td>
                                        <td>
                                            @if($employee['status'])
                                                <span class="badge badge-success">
                                                    Active
                                                </span>
                                            @else
                                                <span class="badge badge-danger">
                                                    Inactive
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                @if(count($assignedEmployees) == 0 && count($employees) == 0)
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">No employees found</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Action Buttons -->
                    {{-- @can('payroll_structures.assign_employee') --}}
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <a href="{{ route('leave.types.index') }}" type="button" class="btn btn-light border me-2">
                                        <i class="ti ti-x me-2"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-check me-2"></i>Save Assignment
                                    </button>
                                </div>
                            </div>
                        </div>
                    {{-- @endcan --}}

                </form>
            </div>
        </div>
    </div>
{{-- @endcan --}}

@endsection

@push('scripts')
    <script>
        var id = "{{ $id }}";
    </script>
    <script src="{{ asset('assets/validation/leave-type-assignment.js?v='.config('api.version')) }}"></script>
@endpush