@extends('admin.layout')

@section('content')
    <div>

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

            <div class="col-auto">

                <h5>

                    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                        <a href="{{ route('admin.staff_list') }}">

                            <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" class="icon icon-tabler">

                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />

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

                            </svg>

                        </a>

                    </button>

                    Add Staff

                </h5>

            </div>

        </div>


        {{-- ==========================================================
        Main Card
        =========================================================== --}}
        <div class="card shadow-sm">

            <div class="card-body">

                <form id="staffForm" action="{{ route('store_staff') }}" method="POST">

                    @csrf

                    <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 @error('name') is-invalid @enderror"
                                placeholder="Enter Staff Name" value="{{ old('name') }}">

                            <small class="text-danger field-error"></small>

                            @error('name')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


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

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

                            <select name="gender" class="form-select @error('gender') is-invalid @enderror">

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

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

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

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

                            </select>

                            <small class="text-danger field-error"></small>

                            @error('gender')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


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

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

                            <input type="tel" name="mobile_number"
                                class="form-control @error('mobile_number') is-invalid @enderror"
                                placeholder="Enter Mobile Number" value="{{ old('mobile_number') }}" inputmode="numeric"
                                pattern="[0-9]*" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            <small class="text-danger field-error"></small>

                            @error('mobile_number')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


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

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

                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                placeholder="Enter Email Address" value="{{ old('email') }}">

                            <small class="text-danger field-error"></small>

                            @error('email')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </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 @error('dob') is-invalid @enderror"
                                value="{{ old('dob') }}" max="{{ date('Y-m-d') }}">

                            <small class="text-danger field-error"></small>

                            @error('dob')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


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

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

                            <div class="input-group">

                                <input type="password" name="password" id="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Enter Password">

                                <button type="button" class="btn btn-outline-secondary" id="togglePassword">

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

                                </button>

                            </div>

                            <small class="text-danger field-error password-error"></small>

                            @error('password')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </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 @error('address') is-invalid @enderror" rows="4"
                                placeholder="Enter Address">{{ old('address') }}</textarea>

                            <small class="text-danger field-error"></small>

                            @error('address')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                    </div>


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

                        <button type="reset" id="resetBtn" class="btn btn-secondary me-2">

                            Reset

                        </button>

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

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

                            Save Staff

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>


    {{-- ==============================================================
    JavaScript
    ============================================================== --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {

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

            const passwordInput = document.getElementById('password');
            const togglePassword = document.getElementById('togglePassword');
            const toggleIcon = document.getElementById('toggleIcon');


            /*
            |--------------------------------------------------------------------------
            | Required Fields
            |--------------------------------------------------------------------------
            */

            const requiredFields = {

                name: 'Name is required.',

                gender: 'Gender is required.',

                mobile_number: 'Mobile number is required.',

                email: 'Email is required.',

                dob: 'Date of birth is required.',

                password: 'Password is required.',

                address: 'Address is required.'

            };


            /*
            |--------------------------------------------------------------------------
            | Get Error Element
            |--------------------------------------------------------------------------
            */

            function getErrorElement(field) {

                const parent = field.closest('.mb-3');

                if (!parent) {
                    return null;
                }

                return parent.querySelector('.field-error');

            }


            /*
            |--------------------------------------------------------------------------
            | Clear Error
            |--------------------------------------------------------------------------
            */

            function clearError(field) {

                field.classList.remove('is-invalid');

                const error = getErrorElement(field);

                if (error) {
                    error.innerText = '';
                }

            }


            /*
            |--------------------------------------------------------------------------
            | Show Error
            |--------------------------------------------------------------------------
            */

            function showError(field, message) {

                field.classList.add('is-invalid');

                const error = getErrorElement(field);

                if (error) {
                    error.innerText = message;
                }

            }


            /*
            |--------------------------------------------------------------------------
            | Validate Required Field
            |--------------------------------------------------------------------------
            */

            function validateRequired(fieldName) {

                const field = form.querySelector(
                    `[name="${fieldName}"]`
                );

                if (!field) {
                    return true;
                }

                const value = field.value.trim();

                if (value === '') {

                    showError(
                        field,
                        requiredFields[fieldName]
                    );

                    return false;

                }

                clearError(field);

                return true;

            }


            /*
            |--------------------------------------------------------------------------
            | Form Submit
            |--------------------------------------------------------------------------
            */

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

                /*
                |--------------------------------------------------------------------------
                | Prevent Multiple Submission
                |--------------------------------------------------------------------------
                */

                if (form.getAttribute('data-processing') === 'true') {

                    e.preventDefault();

                    return;

                }


                let isValid = true;


                /*
                |--------------------------------------------------------------------------
                | Clear Frontend Errors
                |--------------------------------------------------------------------------
                */

                form
                    .querySelectorAll('.field-error')
                    .forEach(function(error) {

                        error.innerText = '';

                    });


                /*
                |--------------------------------------------------------------------------
                | Remove Old Invalid Classes
                |--------------------------------------------------------------------------
                */

                form
                    .querySelectorAll('.is-invalid')
                    .forEach(function(field) {

                        field.classList.remove('is-invalid');

                    });


                /*
                |--------------------------------------------------------------------------
                | Required Validation
                |--------------------------------------------------------------------------
                */

                Object.keys(requiredFields).forEach(function(fieldName) {

                    if (!validateRequired(fieldName)) {

                        isValid = false;

                    }

                });


                /*
                |--------------------------------------------------------------------------
                | Mobile Validation
                |--------------------------------------------------------------------------
                */

                const mobile = form.querySelector(
                    '[name="mobile_number"]'
                );

                if (mobile && mobile.value.trim() !== '') {

                    const mobilePattern = /^[0-9]{10}$/;

                    if (!mobilePattern.test(mobile.value.trim())) {

                        isValid = false;

                        showError(
                            mobile,
                            'Enter a valid 10 digit mobile number.'
                        );

                    }

                }


                /*
                |--------------------------------------------------------------------------
                | Email Validation
                |--------------------------------------------------------------------------
                */

                const email = form.querySelector(
                    '[name="email"]'
                );

                if (email && email.value.trim() !== '') {

                    const emailPattern =
                        /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                    if (!emailPattern.test(email.value.trim())) {

                        isValid = false;

                        showError(
                            email,
                            'Enter a valid email address.'
                        );

                    }

                }


                /*
                |--------------------------------------------------------------------------
                | Password Validation
                |--------------------------------------------------------------------------
                */

                const password = form.querySelector(
                    '[name="password"]'
                );

                if (password && password.value.trim() !== '') {

                    if (password.value.length < 6) {

                        isValid = false;

                        showError(
                            password,
                            'Password must be at least 6 characters.'
                        );

                    }

                }


                /*
                |--------------------------------------------------------------------------
                | Date of Birth Validation
                |--------------------------------------------------------------------------
                */

                const dob = form.querySelector(
                    '[name="dob"]'
                );

                if (dob && dob.value !== '') {

                    const selectedDate = new Date(
                        dob.value + 'T00:00:00'
                    );

                    const today = new Date();

                    today.setHours(0, 0, 0, 0);

                    if (selectedDate > today) {

                        isValid = false;

                        showError(
                            dob,
                            'Date of birth cannot be a future date.'
                        );

                    }

                }


                /*
                |--------------------------------------------------------------------------
                | Stop Submission If Validation Failed
                |--------------------------------------------------------------------------
                */

                if (!isValid) {

                    e.preventDefault();

                    const firstError =
                        form.querySelector('.is-invalid');

                    if (firstError) {

                        firstError.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });

                        setTimeout(function() {

                            firstError.focus();

                        }, 400);

                    }

                    return;

                }


                /*
                |--------------------------------------------------------------------------
                | PROCESSING
                |--------------------------------------------------------------------------
                */

                form.setAttribute(
                    'data-processing',
                    'true'
                );


                /*
                | Disable Buttons
                */

                submitBtn.disabled = true;

                resetBtn.disabled = true;


                /*
                | Change Save Button
                */

                submitBtn.innerHTML = `

                    <span
                        class="spinner-border spinner-border-sm me-1"
                        role="status"
                        aria-hidden="true">
                    </span>

                    Processing...

                `;


                /*
                | Form will submit normally
                */

            });


            /*
            |--------------------------------------------------------------------------
            | Remove Error While Typing
            |--------------------------------------------------------------------------
            */

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

                    field.addEventListener('input', function() {

                        if (field.value.trim() !== '') {

                            clearError(field);

                        }

                    });


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

                        if (field.value.trim() !== '') {

                            clearError(field);

                        }

                    });

                });


            /*
            |--------------------------------------------------------------------------
            | Mobile Only Numbers
            |--------------------------------------------------------------------------
            */

            const mobile = form.querySelector(
                '[name="mobile_number"]'
            );

            if (mobile) {

                mobile.addEventListener('input', function() {

                    this.value = this.value
                        .replace(/[^0-9]/g, '')
                        .slice(0, 10);

                });

            }


            /*
            |--------------------------------------------------------------------------
            | Password Show / Hide
            |--------------------------------------------------------------------------
            */

            if (togglePassword && passwordInput) {

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

                    const isPassword =
                        passwordInput.getAttribute('type') === 'password';


                    passwordInput.setAttribute(
                        'type',
                        isPassword ? 'text' : 'password'
                    );


                    if (toggleIcon) {

                        if (isPassword) {

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

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

                        } else {

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

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

                        }

                    }

                });

            }


            /*
            |--------------------------------------------------------------------------
            | Reset Form
            |--------------------------------------------------------------------------
            */

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

                setTimeout(function() {

                    /*
                    | Remove Processing State
                    */

                    form.removeAttribute(
                        'data-processing'
                    );


                    /*
                    | Clear Errors
                    */

                    form
                        .querySelectorAll('.field-error')
                        .forEach(function(error) {

                            error.innerText = '';

                        });


                    /*
                    | Remove Invalid Classes
                    */

                    form
                        .querySelectorAll('.is-invalid')
                        .forEach(function(field) {

                            field.classList.remove(
                                'is-invalid'
                            );

                        });


                    /*
                    | Enable Buttons
                    */

                    submitBtn.disabled = false;

                    resetBtn.disabled = false;


                    /*
                    | Restore Submit Button
                    */

                    submitBtn.innerHTML = `

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

                        Save Staff

                    `;


                    /*
                    | Reset Password Visibility
                    */

                    if (passwordInput) {

                        passwordInput.setAttribute(
                            'type',
                            'password'
                        );

                    }


                    if (toggleIcon) {

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

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

                    }

                }, 50);

            });

        });
    </script>
@endsection