@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'My profile')
@endsection

@section('content')
    <style>
        .profile-shell .employee-detail-header {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: flex-start;
            margin-bottom: 1.25rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--salon-border);
        }

        .profile-shell .employee-detail-photo {
            width: 96px;
            height: 96px;
            border-radius: var(--salon-radius);
            object-fit: cover;
            border: 2px solid var(--salon-border);
            box-shadow: var(--salon-card-shadow);
        }

        .profile-services-readonly {
            font-size: 0.95rem;
            color: var(--salon-text);
        }
    </style>

    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>My profile</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ \App\Support\SalonAccess::intendedHomeUrl() }}">Home</a></li>
                            <li class="breadcrumb-item active">My profile</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content profile-shell">
            <div class="container-fluid">
                <p class="text-muted mb-3">
                    Update your contact details and password. Service assignments are managed by an administrator.
                    For time off, use <a href="{{ route('leaves.index') }}">My leaves</a>.
                </p>

                <div class="card card-outline card-primary">
                    <div class="card-header border-0">
                        <h3 class="card-title mb-0">Your details</h3>
                    </div>
                    <div class="card-body">
                        <div id="employee_detail_empty" class="d-none"></div>

                        <div id="employee_detail_form" class="employee-detail-body is-visible">
                            <div class="employee-detail-header">
                                <img id="u_header_photo" class="employee-detail-photo" src="" alt="">
                                <div class="flex-grow-1 min-w-0">
                                    <h4 class="mb-1 font-weight-bold" id="u_display_name"></h4>
                                    <p class="text-muted mb-0 small" id="u_display_email"></p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="u_Full_Name">Full name</label>
                                        <input type="text" name="u_Full_Name" class="form-control" id="u_Full_Name"
                                            placeholder="Full name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="u_email">Email</label>
                                        <input type="email" name="u_email" class="form-control" id="u_email"
                                            placeholder="Email address">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="u_Tp">Contact number</label>
                                        <input type="text" name="u_Tp" class="form-control" id="u_Tp"
                                            placeholder="10-digit mobile number" maxlength="10">
                                        <small id="error-message-edit"
                                            class="form-text error-number-message text-danger">Enter a valid number (10 digits required)</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="u_password">New password</label>
                                        <input type="password" name="u_password" class="form-control" id="u_password"
                                            autocomplete="new-password"
                                            placeholder="Leave blank to keep current password">
                                        <small class="form-text text-muted">Only fill this when changing your sign-in password (min. 6 characters).</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="u_Address">Address</label>
                                        <textarea name="u_Address" class="form-control" id="u_Address"
                                            rows="3" placeholder="Street, city, postal code…"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-0">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="u_require_otp" checked>
                                            <label class="custom-control-label" for="u_require_otp">Require email OTP after sign-in</label>
                                        </div>
                                        <small class="form-text text-muted">When off, you can open the app immediately after email and password (use only on trusted devices).</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <label>Services</label>
                                    <p class="text-muted small mb-2">These are assigned by your salon. Ask an administrator if something needs to change.</p>
                                    <ul class="profile-services-readonly list-unstyled mb-3" id="profile_service_names"></ul>
                                    <select id="u_services" class="form-control d-none" multiple="multiple">
                                        @foreach ($services as $service)
                                            <option value="{{ $service->idServices }}">{{ $service->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="u_imageInput">Profile image</label>
                                        <input type="file" name="u_image" class="form-control" id="u_imageInput"
                                            accept="image/*">
                                        <img id="u_imagePreview" src="#" alt="Preview"
                                            class="mt-2 rounded border"
                                            style="max-width: 200px; max-height: 200px; object-fit: cover;">
                                    </div>
                                </div>
                            </div>

                            <div class="text-right">
                                <button type="button" class="btn btn-primary" id="btn_update_employee">
                                    <i class="fas fa-save mr-1"></i> Save changes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('script')
    <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('JS/validate.js') }}"></script>
    <script src="{{ asset('JS/employee.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        window.employeeImagesBase = @json(rtrim(asset('images'), '/'));

        $(function() {
            var payload = @json($employeePayload);
            if (typeof window.populateEmployeeDetail === 'function') {
                window.populateEmployeeDetail(payload);
            }
            var names = (payload.services || []).map(function(s) {
                return s.Name || '';
            }).filter(Boolean);
            var $list = $('#profile_service_names');
            if (!names.length) {
                $list.append($('<li class="text-muted">').text('No services assigned yet.'));
            } else {
                names.forEach(function(n) {
                    $list.append($('<li>').text(n));
                });
            }

            $('#btn_update_employee').on('click', function(e) {
                validateSubmitEditEmployee(e);
            });
        });
    </script>
@endsection