@extends('admin.layout')

@section('title', 'Employee Management')
@section('header_title', 'Employee Management')
@section('header_subtitle', 'View and manage all employees.')



@section('content')
<div class="row">
    <div class="col-xl-4">
        <div class="card shadow-sm border-0 mb-4" style="border-radius:15px;">
            <div class="card-body">
                <div class="modal-header">
                    <h4 class="modal-title">Add New Employee</h4>
                </div>
                <form action="{{ route('admin.add_employee') }}" enctype="multipart/form-data" method="post">
                    @csrf
                    <!-- SECTION 1: SYSTEM ACCESS -->
                    <div style="margin-bottom:20px;">
                        <h5 style="font-weight:700; color:var(--primary-color);"><i class="fa fa-shield"></i> System Access & Roles</h5>
                    </div>
                    <div class="row bg-light p-3 rounded mb-4 border-dashed border-primary">
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Username*</label>
                            <input type="text" class="form-control" name="username" placeholder="Username" value="{{ old('username') }}" required autocomplete="off">
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Password*</label>
                            <input type="password" class="form-control" name="password" placeholder="Password" value="{{ old('password') }}" required autocomplete="new-password">
                        </div>
                        <div class="col-12">
                            <label class="form-label d-block mb-2 font-weight-bold">Assign Roles</label>
                            <div style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 8px; background: #fff;">
                                <div class="row">
                                    @if(!empty($roles_list))
                                        @foreach($roles_list as $r)
                                            <div class="col-sm-6 mb-2">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="role[]" value="{{ $r->id }}" id="role_{{ $r->id }}">
                                                    <label class="form-check-label" for="role_{{ $r->id }}">{{ $r->role_name }}</label>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="col-12 text-muted">No roles defined. <a href="{{ route('admin.manage_roles') }}">Create roles here</a>.</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 2: PERSONAL DETAILS -->
                    <div class="mb-3 border-bottom dashed pb-2">
                        <h5 class="fw-bold text-dark"><i class="fa fa-user"></i> Personal Details</h5>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Full Name</label>
                            <input type="text" class="form-control" name="name" placeholder="Full Name" value="{{ old('name') }}" required>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Email Address</label>
                            <input type="email" class="form-control" name="email" placeholder="Email" value="{{ old('email') }}" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Contact Number</label>
                            <input type="tel" class="form-control" name="contact" placeholder="10 Digit Contact No" value="{{ old('contact') }}" pattern="[1-9]{1}[0-9]{9}" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Profile Image</label>
                            <input type="file" name="img" class="form-control">
                        </div>
                    </div>

                    <!-- SECTION 3: EMPLOYMENT DETAILS -->
                    <div class="mt-4 mb-3 border-bottom dashed pb-2">
                        <h5 class="fw-bold text-dark"><i class="fa fa-briefcase"></i> Employment Details</h5>
                    </div>
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Assign to Salon</label>
                            <select class="form-control" name="salon_id" required>
                                <option value="">Select Salon</option>
                                @foreach($allSalons as $salon)
                                    <option value="{{ $salon->id }}">{{ $salon->center_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 py-2 mt-3">Add Employee</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-xl-8">
        <div class="card shadow-sm border-0" style="border-radius:15px;">
            <div class="card-body">
                <h3 class="fw-bold mb-4">Employee List</h3>
                <div class="table-responsive">
                    <table id="example-datatable" class="table table-vcenter table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center"><i class="fa fa-user"></i></th>
                                <th>Name</th>
                                <th>Salon</th>
                                <th>Email/Phone</th>
                                <th>Status</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = 1; @endphp
                            @foreach ($allEmployee as $emp)
                                <tr>
                                    <td class="text-center">{{ $i++ }}</td>
                                    <td class="text-center">
                                        @if ($emp->profile_image != '')
                                            <img src="{{ asset('uploads/' . $emp->profile_image) }}" alt="avatar" class="rounded-circle" width="40" height="40">
                                        @else
                                            <img src="{{ asset('public/assets/img/placeholders/avatars/avatar11.jpg') }}" alt="avatar" class="rounded-circle" width="40">
                                        @endif
                                    </td>
                                    <td><strong>{{ $emp->full_name }}</strong></td>
                                    <td><span class="badge bg-info">{{ $emp->center_name }}</span></td>
                                    <td>
                                        <small>{{ $emp->email }}</small><br>
                                        <small>{{ $emp->contact_no }}</small>
                                    </td>
                                    <td class="text-center">
                                        @if($emp->status == 1)
                                            <button onclick="statusupdate('{{ $emp->id }}','0');" class="btn btn-xs btn-success">Active</button>
                                        @else
                                            <button onclick="statusupdate('{{ $emp->id }}','1');" class="btn btn-xs btn-danger">Inactive</button>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <div class="btn-group">
                                            <a href="{{ route('admin.add_employee', ['id' => $emp->id]) }}" title="Edit" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></a>
                                            <button onclick="deleteRecord('{{ $emp->id }}');" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<form name="status_update" id="status_update" action="{{ route('admin.statusemployee') }}" method="post">
    @csrf
    <input type="hidden" name="employee_id" id="employee_id" value="">
    <input type="hidden" name="employee_status" id="employee_status" value="">
</form>

<form name="frm_delete" id="frm_delete" action="{{ route('admin.deleteEmployee') }}" method="post">
    @csrf
    <input type="hidden" name="user_id" id="user_id" value="">
</form>
@endsection

@section('extra_scripts')
<script>
    function statusupdate(id, status) {
        $("#employee_id").val(id);
        $("#employee_status").val(status);
        if (confirm("Are you sure you want to change the status?")) {
            $("#status_update").submit();
        }
    }

    function deleteRecord(id) {
        $("#user_id").val(id);
        if (confirm("Are you sure you want to delete this Employee?")) {
            $("#frm_delete").submit();
        }
    }
</script>
@endsection