@extends('Admin.layout')

@section('content')

<div class="d-flex align-items-center gap-2 mb-4">

    <a href="{{ route('staff_management') }}"
       class="btn btn-icon btn-label-primary">
        <i class="ti ti-arrow-left"></i>
    </a>

    <h5 class="mb-0 fw-bold text-primary">
        Edit Staff
    </h5>

</div>


<div class="card p-4">

<form id="updateStaffForm" action="{{ route('admin.updatestaff') }}"
      method="POST"
      enctype="multipart/form-data"
      novalidate>

    @csrf

    <input type="hidden"
           name="staff_id"
           value="{{ $staff->id }}">


    {{-- Staff Name + Email --}}
    <div class="row g-3">

        {{-- Staff Name --}}
        <div class="col-12 col-md-6">

            <label for="staff_name">
                Staff Name
            </label>

            <input type="text"
                   id="staff_name"
                   class="form-control"
                   name="staff_name"
                   autocomplete="off"
                   value="{{ old('staff_name', $staff->staff_name) }}">

            @error('staff_name')
                <div class="text-danger mt-1"
                     style="font-size:13px;">
                    {{ $message }}
                </div>
            @enderror

        </div>


        {{-- Email --}}
        <div class="col-12 col-md-6">

            <label for="email">
                Email
            </label>

            <input type="email"
                   id="email"
                   class="form-control"
                   name="email"
                   autocomplete="off"
                   value="{{ old('email', $staff->email) }}">

            @error('email')
                <div class="text-danger mt-1"
                     style="font-size:13px;">
                    {{ $message }}
                </div>
            @enderror

        </div>

    </div>


    {{-- Phone + Role --}}
    <div class="row g-3 mt-1">

        {{-- Phone --}}
        <div class="col-12 col-md-6">

            <label for="phone">
                Phone
            </label>

            <input type="number"
                   id="phone"
                   class="form-control"
                   name="phone"
                   autocomplete="off"
                   value="{{ old('phone', $staff->phone) }}">

            @error('phone')
                <div class="text-danger mt-1"
                     style="font-size:13px;">
                    {{ $message }}
                </div>
            @enderror

        </div>


        {{-- Role --}}
        <div class="col-12 col-md-6">

            <label for="role">
                Role
            </label>

            <select id="role"
                    class="form-select"
                    name="role">

                <option value="">
                    Select Role
                </option>

                <option value="Manager"
                    {{ old('role', $staff->role) == 'Manager' ? 'selected' : '' }}>
                    Manager
                </option>

                <option value="Staff"
                    {{ old('role', $staff->role) == 'Staff' ? 'selected' : '' }}>
                    Staff
                </option>

                <option value="Admin"
                    {{ old('role', $staff->role) == 'Admin' ? 'selected' : '' }}>
                    Admin
                </option>

            </select>

            @error('role')
                <div class="text-danger mt-1"
                     style="font-size:13px;">
                    {{ $message }}
                </div>
            @enderror

        </div>

    </div>


    {{-- Password + Photo --}}
    <div class="row g-3 mt-1">

        {{-- LEFT SIDE --}}
        <div class="col-12 col-md-6">

            {{-- Password --}}
            <label for="staff_password">
                New Password
            </label>

            <div class="input-group">

<input type="password"
       id="staff_password"
       class="form-control"
       name="password"
       autocomplete="new-password"
       placeholder="Enter new password"
       value="{{ old('password', $staff->password) }}">

                <span class="input-group-text"
                      id="toggleStaffPassword"
                      role="button"
                      tabindex="0"
                      style="cursor:pointer;">

                    <i class="ti ti-eye"></i>

                </span>

            </div>

            <small class="text-muted">
                Leave blank to keep the current password.
            </small>

            @error('password')
                <div class="text-danger mt-1"
                     style="font-size:13px;">
                    {{ $message }}
                </div>
            @enderror


            {{-- Gender --}}
            <div class="mt-3">

                <label class="form-label mb-2">
                    Gender
                </label>

                <div>

                    <div class="form-check form-check-inline">

                        <input class="form-check-input"
                               type="radio"
                               id="male"
                               name="gender"
                               value="male"
                               {{ strtolower(old('gender', $staff->gender)) == 'male' ? 'checked' : '' }}>

                        <label class="form-check-label"
                               for="male">
                            Male
                        </label>

                    </div>


                    <div class="form-check form-check-inline">

                        <input class="form-check-input"
                               type="radio"
                               id="female"
                               name="gender"
                               value="female"
                               {{ strtolower(old('gender', $staff->gender)) == 'female' ? 'checked' : '' }}>

                        <label class="form-check-label"
                               for="female">
                            Female
                        </label>

                    </div>

                </div>

                @error('gender')
                    <div class="text-danger mt-1"
                         style="font-size:13px;">
                        {{ $message }}
                    </div>
                @enderror

            </div>

        </div>


        {{-- RIGHT SIDE : PHOTO --}}
{{-- RIGHT SIDE : PHOTO --}}
<div class="col-12 col-md-6">

    <label for="photo" class="form-label">
        Upload Photo
    </label>

    <div class="w-100 p-2 text-center"
         style="
            border:1px solid var(--glass-border);
            border-radius:8px;
         ">

        {{-- Photo Preview --}}
        <div id="photoPreview"
             class="rounded w-100 mb-2
                    d-flex align-items-center
                    justify-content-center"
             style="
                height:160px;
                border:1px solid var(--glass-border);
                cursor:pointer;
                overflow:hidden;
                background:#07152f;
             "
             onclick="document.getElementById('photo').click()">

            @if($staff->photo)

                <img id="previewImage"
                     src="{{ asset('staff/' . $staff->photo) }}"
                     alt="Staff Photo"
                     style="
                        width:100%;
                        height:100%;
                        object-fit:contain;
                        display:block;
                     ">

            @else

                <div id="photoPlaceholder">

                    <i class="ti ti-camera fs-2 d-block mb-1"></i>

                    <span>
                        Upload Photo
                    </span>

                </div>

            @endif

        </div>


        {{-- Choose Photo Button --}}
        <button type="button"
                class="btn btn-sm btn-primary w-100 text-nowrap"
                onclick="document.getElementById('photo').click()">

            <i class="ti ti-camera me-1"></i>

            Choose Photo

        </button>


        {{-- File Input --}}
        <input type="file"
               id="photo"
               name="photo"
               class="d-none"
               accept=".jpg,.jpeg,.png,image/*">

    </div>


    @error('photo')
        <small class="text-danger d-block mt-1">
            {{ $message }}
        </small>
    @enderror

</div>

    </div>


    {{-- Submit --}}
    <div class="d-flex justify-content-center mt-3">

        <button type="submit"
                class="btn btn-primary px-4"
                id="updateStaffBtn">

            Update Staff

        </button>

    </div>

</form>

</div>


{{-- Hide validation error when user changes field --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('input, select, textarea').forEach(function (field) {

        field.addEventListener('input', hideError);
        field.addEventListener('change', hideError);

    });


    function hideError() {

        const parent = this.closest('.col-12');

        if (parent) {

            const error = parent.querySelector('.text-danger');

            if (error) {
                error.style.display = 'none';
            }

        }

    }

});
</script>


{{-- Password Eye --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const password = document.getElementById('staff_password');
    const toggle = document.getElementById('toggleStaffPassword');
    const icon = toggle.querySelector('i');


    toggle.addEventListener('click', function () {

        if (password.type === 'password') {

            password.type = 'text';

            icon.classList.remove('ti-eye');
            icon.classList.add('ti-eye-off');

        } else {

            password.type = 'password';

            icon.classList.remove('ti-eye-off');
            icon.classList.add('ti-eye');

        }

    });

});
</script>


{{-- Photo Preview --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const photoInput = document.getElementById('photo');
    const photoPreview = document.getElementById('photoPreview');

    photoInput.addEventListener('change', function () {

        const file = this.files[0];

        if (!file) {
            return;
        }

        // Check image
        if (!file.type.startsWith('image/')) {
            return;
        }

        const reader = new FileReader();

        reader.onload = function (e) {

            photoPreview.innerHTML = `
                <img src="${e.target.result}"
                     alt="Staff Photo Preview"
                     style="
                        width:100%;
                        height:100%;
                        object-fit:contain;
                        display:block;
                     ">
            `;

        };

        reader.readAsDataURL(file);

    });

});
</script>
<script>
document.getElementById('updateStaffForm').addEventListener('submit', function () {

    const button = document.getElementById('updateStaffBtn');

    button.disabled = true;

    button.innerHTML = `
        <span class="spinner-border spinner-border-sm me-1"
              role="status"
              aria-hidden="true"></span>
        Updating...
    `;
});
</script>
@endsection