@extends('layouts.master')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-xxl">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold mb-1" style="font-size: 1.8rem;">Human Resource</h4>
                    <p class="text-muted mb-0">People who manage City Public School</p>
                </div>
                <button class="btn btn-primary shadow-sm text-capitalize"
                        data-bs-toggle="modal"
                        data-bs-target="#openmodal">
                    <i class="fa fa-plus me-1"></i> Add HR
                </button>
            </div>
            <div class="row">
                <ul class="nav nav-tabs mb-4" id="hrTabs">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#admins">
                            Admins ({{ $admins->count() }})
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#teachers">
                            Teachers ({{ $teachers->count() }})
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#accountants">
                            Accountants ({{ $accountants->count() }})
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#receptionists">
                            Receptionists ({{ $receptionists->count() }})
                        </button>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="admins">
                        <div class="mb-3">
                            <input type="text"
                                   class="form-control hr-search"
                                   placeholder="Search Admin by name or contact...">
                        </div>
                        @include('school.hr.hr-cards', [
                            'data' => $admins,
                            'role' => 'admin',
                            'folder' => 'admins',
                            'showCreator' => false
                        ])
                    </div>
                    <div class="tab-pane fade" id="teachers">
                        <div class="mb-3">
                            <input type="text"
                                   class="form-control hr-search"
                                   placeholder="Search Teacher by name or contact...">
                        </div>
                        @include('school.hr.hr-cards', [
                            'data' => $teachers,
                            'role' => 'teacher',
                            'folder' => 'teachers',
                            'showCreator' => true
                        ])
                    </div>
                    <div class="tab-pane fade" id="accountants">
                        <div class="mb-3">
                            <input type="text"
                                   class="form-control hr-search"
                                   placeholder="Search Accountant by name or contact...">
                        </div>
                        @include('school.hr.hr-cards', [
                            'data' => $accountants,
                            'role' => 'accountant',
                            'folder' => 'accountants',
                            'showCreator' => true
                        ])
                    </div>
                    <div class="tab-pane fade" id="receptionists">
                        <div class="mb-3">
                            <input type="text"
                                   class="form-control hr-search"
                                   placeholder="Search Receptionist by name or contact...">
                        </div>
                        @include('school.hr.hr-cards', [
                            'data' => $receptionists,
                            'role' => 'receptionist',
                            'folder' => 'receptionists',
                            'showCreator' => true
                        ])
                    </div>
                </div>

            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="openmodal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title text-white"><i class="bx bx-user-pin me-2"></i>Add New HR</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="addAdminForm" action="{{route('school.store.hr')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                    <!-- Profile Image Upload Section -->
                        <div class="text-center mb-4">
                            <div class="image-preview mb-2" id="imagePreview">
                                <i class="bx bx-user"></i>
                            </div>
                            <div class="mt-2">
                                <label for="adminImage" class="upload-label text-primary">
                                    <i class="bx bx-upload me-1"></i> Upload Photo
                                </label>
                                <input type="file" id="adminImage" class="d-none" name="image" accept="image/*" onchange="previewImage(this)">
                                <p class="text-muted small mt-1">JPG, PNG or GIF (Max. 2MB)</p>
                            </div>
                        </div>
                        <!-- Full Name and Phone Number -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" id="adminName" placeholder="Enter full name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Contact Number <span class="text-danger">*</span></label>
                                <input type="tel" class="form-control" name="cntctnum" id="adminPhone" placeholder="03XX-XXXXXXX" required>
                            </div>
                        </div>
                        <!-- Email and Password -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Email<span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email" id="adminEmail" placeholder="admin@cps.edu.pk" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Password <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="adminPassword" name="password" placeholder="••••••••" required>
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePassword()">
                                        <i class="bx bx-show"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Role and Salary -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Role <span class="text-danger">*</span></label>
                                <select class="form-select" id="adminRole" name="role" required>
                                    <option value="" selected disabled>Select Role</option>
                                    <option value="Admin">Admin</option>
                                    <option value="Teacher">Teacher</option>
                                    <option value="Accountant">Accountant</option>
                                    <option value="Receptionist">Receptionist</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Salary (PKR) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">Rs.</span>
                                    <input type="number" name="salary" class="form-control" id="adminSalary" placeholder="Enter salary amount" min="0" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add HR</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        var deletePromoUrl = "{{ route('owner.promo.delete', ':id') }}";
        var CSRF_TOKEN = "{{ csrf_token() }}";
    </script>
@endsection