@extends('admin.layout')

@section('content')

<div>

    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">

            <h5 class="d-flex align-items-center">

                <a href="{{ route('admin.staff_list') }}"
                    class="btn btn-icon bg-white me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <svg xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#000"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round">

                        <path d="M15 6l-6 6l6 6" />

                    </svg>

                </a>

                Edit Staff

            </h5>

        </div>

    </div>


    <div class="card shadow-sm">

        <div class="card-body">

            <form id="staffForm"
                action="{{ route('update_staff', $staff->id) }}"
                method="POST">

                @csrf
                @method('PUT')

                <div class="row">

                    {{-- Name --}}
                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Name <span class="text-danger">*</span>
                        </label>

                        <input type="text"
                            name="name"
                            class="form-control"
                            placeholder="Enter Staff Name"
                            value="{{ old('name', $staff->name) }}"
                            required>

                    </div>


                    {{-- Mobile --}}
                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Mobile Number <span class="text-danger">*</span>
                        </label>

                        <input type="text"
                            name="mobile_number"
                            class="form-control"
                            placeholder="Enter Mobile Number"
                            value="{{ old('mobile_number', $staff->mobile_number) }}"
                            maxlength="20"
                            required>

                    </div>


                    {{-- Date of Birth --}}
                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Date of Birth <span class="text-danger">*</span>
                        </label>

                        <input type="date"
                            name="dob"
                            class="form-control"
                            value="{{ old('dob', $staff->dob ? $staff->dob->format('Y-m-d') : '') }}"
                            required>

                    </div>


                    {{-- Password --}}
                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Password
                        </label>

                        <div class="input-group">

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

                            <button type="button"
                                class="btn btn-outline-secondary"
                                id="togglePassword"
                                aria-label="Show password">

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

                            </button>

                        </div>

                    </div>


                    {{-- Address --}}
                    <div class="col-12 mb-3">

                        <label class="form-label">
                            Address <span class="text-danger">*</span>
                        </label>

                        <textarea name="address"
                            class="form-control"
                            rows="4"
                            placeholder="Enter Address"
                            required>{{ old('address', $staff->address) }}</textarea>

                    </div>

                </div>


                {{-- Buttons --}}
                <div class="text-center mt-3">

                    <a href="{{ route('admin.staff_list') }}"
                        class="btn btn-secondary me-2">

                        Cancel

                    </a>

                    <button type="submit"
                        id="submitBtn"
                        class="btn btn-primary">

                        <i class="ti tabler-device-floppy me-1"></i>

                        Update Staff

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


{{-- Submit Button --}}
<script>

    let isSubmitting = false;

    document.getElementById('staffForm').addEventListener('submit', function(e) {

        if (isSubmitting) {

            e.preventDefault();

            return false;
        }

        isSubmitting = true;

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

        submitBtn.disabled = true;

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

    });

</script>


{{-- Password Toggle --}}
<script>

    document.addEventListener('DOMContentLoaded', function() {

        const togglePassword =
            document.getElementById('togglePassword');

        const password =
            document.getElementById('password');

        if (!togglePassword || !password) {
            return;
        }

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

            const icon =
                this.querySelector('i');

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

                // Show password
                password.type = 'text';

                icon.classList.remove('tabler-eye');

                icon.classList.add('tabler-eye-off');

                this.setAttribute(
                    'aria-label',
                    'Hide password'
                );

            } else {

                // Hide password
                password.type = 'password';

                icon.classList.remove('tabler-eye-off');

                icon.classList.add('tabler-eye');

                this.setAttribute(
                    'aria-label',
                    'Show password'
                );

            }

        });

    });

</script>

@endsection