@extends('layouts.master')
@section('title')
    @isset($data)
        Edit User for {{ $outlet->outlet_name }}
    @else
        Add User for {{ $outlet->outlet_name }}
    @endisset
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title py-3">
                        @isset($data)
                            Edit User for {{ $outlet->outlet_name }}
                        @else
                            Add User for {{ $outlet->outlet_name }}
                        @endisset
                    </h4>

                    @if ($errors->any())
                        <div class="alert alert-danger" id="error-alert">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close float-end" onclick="clearErrors()"></button>
                        </div>
                    @endif

                    @if (session('success'))
                        <div class="alert alert-success" id="success-alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close float-end" onclick="clearSuccess()"></button>
                        </div>
                    @endif

                    <form action="{{ route('users.store_outlet') }}" method="POST" enctype="multipart/form-data"
                        id="user-form" novalidate>
                        @csrf
                        @isset($data)
                            <input name="id" type="hidden" value="{{ $data->id }}">
                        @endisset
                        <input type="hidden" name="branch_id" value="{{ $outlet->id }}">
                        <input type="hidden" name="role" value="{{ $roles->id }}">

                        <div class="row">
                            {{-- Username --}}
                            <div class="col-md-6">
                                <div class="mb-3 row">
                                    <label for="username" class="col-md-4 col-form-label">Username *</label>
                                    <div class="col-md-8">
                                        <input type="text" id="username" name="username"
                                            value="{{ isset($data) ? $data->username : old('username') }}"
                                            class="form-control @error('username') is-invalid @enderror" minlength="3"
                                            required autocomplete="off">
                                        @error('username')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Email --}}
                            <div class="col-md-6">
                                <div class="mb-3 row">
                                    <label for="email" class="col-md-4 col-form-label">Email *</label>
                                    <div class="col-md-8">
                                        <input type="email" id="email" name="email"
                                            value="{{ isset($data) ? $data->email : old('email') }}"
                                            class="form-control @error('email') is-invalid @enderror" required
                                            autocomplete="off">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Phone --}}
                            <div class="col-md-6">
                                <div class="mb-3 row">
                                    <label for="phone" class="col-md-4 col-form-label">Phone *</label>
                                    <div class="col-md-8">
                                        <input type="tel" id="phone" name="phone"
                                            value="{{ isset($data) ? $data->phone : old('phone') }}"
                                            class="form-control @error('phone') is-invalid @enderror" pattern="[0-9]{10}"
                                            maxlength="10" required autocomplete="off">
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Role --}}
                            {{-- <div class="col-md-6">
                                <div class="mb-3 row">
                                    <label for="role" class="col-md-4 col-form-label">User Role *</label>
                                    <div class="col-md-8">
                                        <select id="role" name="role"
                                            class="form-select @error('role') is-invalid @enderror" required>
                                            <option value="">-- Select Role --</option>
                                            @foreach ($roles as $role)
                                                <option value="{{ $role->id }}"
                                                    @if ((isset($data) && $data->role == $role->id) || old('role') == $role->id) selected @endif>
                                                    {{ $role->role_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div> --}}

                            {{-- Password --}}
                            <div class="col-md-6">
                                <div class="mb-3 row">
                                    <label for="password" class="col-md-4 col-form-label">
                                        Password @if (!isset($data))
                                            *
                                        @endif
                                    </label>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <input type="password" id="passwordz" name="password"
                                                class="form-control @error('password') is-invalid @enderror" minlength="8"
                                                @if (!isset($data)) required @endif
                                                autocomplete="new-password" placeholder="Enter New Password">
                                            <button type="button" class="btn btn-outline-secondary toggle-passwordz"
                                                data-target="password">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                        </div>
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Confirm Password --}}
                            <div class="col-md-6">
                                <div class="mb-3 row">
                                    <label for="confirm_password" class="col-md-4 col-form-label">
                                        Confirm Password @if (!isset($data))
                                            *
                                        @endif
                                    </label>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <input type="password" id="confirm_password" name="confirm_password"
                                                class="form-control @error('confirm_password') is-invalid @enderror"
                                                @if (!isset($data)) required @endif
                                                autocomplete="new-password" placeholder="Confirm Password">
                                            <button type="button" class="btn btn-outline-secondary toggle-passwordz"
                                                data-target="confirm_password">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                        </div>
                                        @error('confirm_password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>



                            {{-- Status --}}
                            <div class="col-md-6">
                                <div class="mb-3 row">
                                    <label class="col-md-4 col-form-label">Status</label>
                                    <div class="col-md-8">
                                        <select name="status" class="form-select @error('status') is-invalid @enderror">
                                            <option value="active" @if ((isset($data) && $data->status == 'active') || old('status') == 'active') selected @endif>
                                                Active
                                            </option>
                                            <option value="inactive" @if ((isset($data) && $data->status == 'inactive') || old('status') == 'inactive') selected @endif>
                                                Inactive
                                            </option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <div class="col-md-12 d-flex align-items-center justify-content-end py-3">
                                <button type="button" class="btn btn-secondary me-2"
                                    onclick="clearForm()">Clear</button>
                                <button class="btn btn-primary px-4" type="submit" id="submit-btn">
                                    @isset($data)
                                        Update
                                    @else
                                        Submit
                                    @endisset
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@section('scripts')
    <script>
        // Clear validation errors
        function clearErrors() {
            document.getElementById('error-alert').style.display = 'none';

            // Also remove field-level validation errors
            const invalidFields = document.querySelectorAll('.is-invalid');
            invalidFields.forEach(field => {
                field.classList.remove('is-invalid');
            });

            const invalidFeedbacks = document.querySelectorAll('.invalid-feedback');
            invalidFeedbacks.forEach(feedback => {
                feedback.style.display = 'none';
            });
        }

        // Clear success message
        function clearSuccess() {
            document.getElementById('success-alert').style.display = 'none';
        }

        // Clear form
        function clearForm() {
            document.getElementById('user-form').reset();
            clearErrors();

            // Reset select elements to first option
            const selects = document.querySelectorAll('select');
            selects.forEach(select => {
                select.selectedIndex = 0;
            });
        }

        // Toggle password visibility
        document.querySelectorAll('.toggle-passwordz').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const passwordInput = document.getElementById(targetId);
                const icon = this.querySelector('i');

                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    passwordInput.type = 'password';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
        });

        // Password confirmation validation
        document.getElementById('password').addEventListener('input', validatePassword);
        document.getElementById('confirm_password').addEventListener('input', validatePassword);

        function validatePassword() {
            const password = document.getElementById('password');
            const confirmPassword = document.getElementById('confirm_password');
            const submitBtn = document.getElementById('submit-btn');

            if (password.value && confirmPassword.value) {
                if (password.value !== confirmPassword.value) {
                    confirmPassword.setCustomValidity("Passwords don't match");
                    submitBtn.disabled = true;
                } else {
                    confirmPassword.setCustomValidity('');
                    submitBtn.disabled = false;
                }
            }
        }

        // Auto-hide alerts after 5 seconds
        setTimeout(() => {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                if (alert.style.display !== 'none') {
                    alert.style.display = 'none';
                }
            });
        }, 5000);

        // Form submission handler
        document.getElementById('user-form').addEventListener('submit', function(e) {
            // If editing and password fields are empty, remove them from submission
            @if (isset($data))
                const password = document.getElementById('password');
                const confirmPassword = document.getElementById('confirm_password');

                if (!password.value && !confirmPassword.value) {
                    password.disabled = true;
                    confirmPassword.disabled = true;
                }
            @endif

            // Show loading state
            const submitBtn = document.getElementById('submit-btn');
            submitBtn.disabled = true;
            submitBtn.innerHTML =
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...';
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Toggle password visibility
            $(".toggle-passwordz").on("click", function() {

                let targetId = $(this).data("target");
                let $input = $("#" + targetId);
                let $icon = $(this).find("i");

                if ($input.attr("type") === "password") {
                    $input.attr("type", "text");
                    $icon.removeClass("fa-eye").addClass("fa-eye-slash");
                } else {
                    $input.attr("type", "password");
                    $icon.removeClass("fa-eye-slash").addClass("fa-eye");
                }
            });

            // Confirm password validation
            $("#passwordz, #confirm_password").on("keyup", function() {
                let password = $("#passwordz").val();
                let confirmPassword = $("#confirm_password").val();

                if (password && confirmPassword && password !== confirmPassword) {
                    $("#confirm_password")[0].setCustomValidity("Passwords don't match");
                } else {
                    $("#confirm_password")[0].setCustomValidity("");
                }
            });
        });
    </script>
@endsection
@endsection