@extends('Admin.layout')

@section('content')

<div class="container-fluid">

    <h3>Add Staff</h3>

    <div class="d-flex justify-content-end mb-3">
    <!-- <a href="{{ route('staffrole') }}" class="btn btn-primary">
        Add Role
    </a> -->
</div>


<div class="card p-4">

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

    @csrf

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

        <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') }}">

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


        <div class="col-12 col-md-6">
            <label for="email">Email</label>

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

            @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">

        <div class="col-12 col-md-6">
            <label for="phone">Phone</label>

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

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


        <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') == 'Manager' ? 'selected' : '' }}>
                    Manager
                </option>

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

                <option value="Admin"
                    {{ old('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">Staff Password</label>

            <div class="input-group">

                <input type="password"
                       id="staff_password"
                       class="form-control"
                       name="password"
                       autocomplete="new-password">

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

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

                </span>

            </div>

            @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"
                               {{ old('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"
                               {{ old('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 --}}
        <div class="col-12 col-md-6">

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

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

                {{-- Preview Box --}}
                <div id="livePhotoUpload"
                     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;
                     "
                     onclick="document.getElementById('livePhoto').click()">

                    <div id="photoPlaceholder">

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

                        <span>
                            Upload Photo
                        </span>

                    </div>

                </div>


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

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

                    <span>
                        Choose Photo
                    </span>

                </button>


                {{-- Backend Input --}}
                <input type="file"
                       id="livePhoto"
                       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 class="btn btn-primary px-4"
                type="submit"
                id="submitBtn">

            Submit

        </button>

    </div>

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

<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-md-6');

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

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

});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {

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

    const passwordError = @json($errors->has('password'));

    if (passwordError) {

        const oldPassword = sessionStorage.getItem('staff_password');

        if (oldPassword) {
            password.value = oldPassword;
        }

    } else {

        // Fresh page / successful submit
        sessionStorage.removeItem('staff_password');
    }

    // Eye icon
    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');

        }

    });

    form.addEventListener('submit', function () {

        sessionStorage.setItem(
            'staff_password',
            password.value
        );

    });

});
</script>

<script>
document.getElementById('livePhoto').addEventListener('change', function () {

    const file = this.files[0];
    const preview = document.getElementById('livePhotoUpload');
    const placeholder = document.getElementById('photoPlaceholder');

    if (file) {

        const reader = new FileReader();

        reader.onload = function (e) {

            preview.innerHTML = `
                <img src="${e.target.result}"
                     style="width:100%;
                            height:100%;
                            object-fit:contain;">
            `;

        };

        reader.readAsDataURL(file);
    }

});
</script>

<!-- for btn submitting.... -->

<script>
document.addEventListener('DOMContentLoaded', function () {

    const form = document.getElementById('staffForm');
    const submitBtn = document.getElementById('submitBtn');

    form.addEventListener('submit', function () {

        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <span class="spinner-border spinner-border-sm me-1"
                  role="status"
                  aria-hidden="true"></span>
            Submitting...
        `;

    });

});
</script>
@endsection