@php
    // ensure $user is set
    $user = $user ?? new \App\Models\User();
@endphp

<div class="container" style="max-width:900px;">
    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label">Name <span class="text-danger">*</span></label>
            <input id="name" type="text" name="name" class="form-control" value="{{ old('name', $user->name ?? '') }}">
            <div class="invalid-feedback d-none"></div>
        </div>

        <div class="col-md-6 mb-3">
            <label class="form-label">Email <span class="text-danger">*</span></label>
            <input id="email" type="email" name="email" class="form-control" value="{{ old('email', $user->email ?? '') }}">
            <div class="invalid-feedback d-none"></div>
        </div>

        <div class="col-md-6 mb-3">
            <label class="form-label">Phone <span class="text-danger">*</span></label>
            <input id="phone_number" type="text" name="phone_number" class="form-control" value="{{ old('phone_number', $user->phone_number ?? '') }}"maxlength="10">
            <div class="invalid-feedback d-none"></div>
        </div>

        {{-- PAN / PEN logic --}}
        @php
            $hasPan = !empty(old('pan_number', $user->pan_number ?? ''));
            $hasPen = !empty(old('pen_number', $user->pen_number ?? ''));
        @endphp

        @if($hasPan)
            <div class="col-md-6 mb-3" id="pan_field">
                <label class="form-label">PAN <span class="text-danger">*</span></label>
                <input id="pan" type="text" name="pan" class="form-control" value="{{ old('pan_number', $user->pan_number ?? '') }}">
                <div class="invalid-feedback d-none"></div>
            </div>
        @elseif($hasPen)
            <div class="col-md-6 mb-3" id="pen_field">
                <label class="form-label">PEN <span class="text-danger">*</span></label>
                <input id="pen" type="text" name="pen" class="form-control" value="{{ old('pen_number', $user->pen_number ?? '') }}">
                <div class="invalid-feedback d-none"></div>
            </div>
        @else
            <div class="col-md-6 mb-3" id="pan_field">
                <label class="form-label">PAN</label>
                <input id="pan" type="text" name="pan" class="form-control" value="{{ old('pan', $user->pan ?? '') }}">
                <div class="invalid-feedback d-none"></div>
            </div>

            <div class="col-md-6 mb-3" id="pen_field">
                <label class="form-label">PEN</label>
                <input id="pen" type="text" name="pen" class="form-control" value="{{ old('pen', $user->pen ?? '') }}">
                <div class="invalid-feedback d-none"></div>
            </div>
        @endif

        @if(isset($user) && $user->exists)
            <div class="mb-3">
                <label class="form-label">Status</label>
                <select id="status" name="status" class="form-select">
                    <option value="1" {{ (old('status', $user->status ?? 1) == 1) ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ (old('status', $user->status ?? 1) == 0) ? 'selected' : '' }}>Inactive</option>
                </select>
                <div class="invalid-feedback d-none"></div>
            </div>
        @endif

        <div class="mb-3">
            <button id="submitBtn" type="submit" class="btn btn-primary">{{ (isset($user) && $user->exists) ? 'Update User' : 'Create User' }}</button>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function(){
    // load a script dynamically and call callback when ready
    function loadScript(src, cb) {
        var s = document.createElement('script');
        s.src = src;
        s.onload = cb;
        document.head.appendChild(s);
    }

    // ensure jQuery is available
    function ensurejQuery(next) {
        if (window.jQuery) return next();
        loadScript('https://code.jquery.com/jquery-3.6.0.min.js', next);
    }

    // ensure SweetAlert2 is available
    function ensureSwal(next) {
        if (window.Swal) return next();
        loadScript('https://cdn.jsdelivr.net/npm/sweetalert2@11', next);
    }

    ensurejQuery(function(){
        ensureSwal(function(){
            // All libraries ready — run main
            (function($){
                $(function() {
                    // Try the create form id, then the edit form id, then fallback
                    var $form = $('#add_user');
                    if (!$form.length) $form = $('#edit_user');
                    if (!$form.length) $form = $('form').first();

                    var $submitBtn = $('#submitBtn');

                    // PAN / PEN toggle
                    var $pan = $('#pan');
                    var $pen = $('#pen');
                    var $panField = $('#pan_field');
                    var $penField = $('#pen_field');

                    if ($pan.length && $pen.length) {
                        function toggleFields() {
                            var panVal = $.trim($pan.val() || '');
                            var penVal = $.trim($pen.val() || '');
                            if (panVal.length > 0) $penField.hide(); else $penField.show();
                            if (penVal.length > 0) $panField.hide(); else $panField.show();
                        }
                        toggleFields();
                        $pan.on('input', toggleFields);
                        $pen.on('input', toggleFields);
                    }

                    // Clear validation
                    function clearErrors() {
                        $form.find('.is-invalid').removeClass('is-invalid');
                        $form.find('.invalid-feedback').addClass('d-none').html('');
                        $form.find('.ajax-error').remove();
                        $('#form-global-errors').remove();
                    }

                    // Show validation errors
                    function showErrors(errors) {
                        Object.keys(errors).forEach(function(field) {
                            var $input = $form.find('[name="'+field+'"]');

                            if (!$input.length) {
                                var alt = field.replace('.', '_');
                                $input = $form.find('[name="'+alt+'"]');
                            }

                            if ($input.length) {
                                $input.addClass('is-invalid');
                                var $fb = $input.closest('.mb-3').find('.invalid-feedback');
                                $fb.removeClass('d-none').html(errors[field].join('<br>'));
                            } else {
                                // global error fallback
                                var $global = $('#form-global-errors');
                                if (!$global.length) {
                                    $global = $('<div id="form-global-errors" class="alert alert-danger"></div>');
                                    $form.prepend($global);
                                }
                                $global.append('<div>'+field+': '+errors[field].join(', ')+'</div>');
                            }
                        });

                        $form.find('.is-invalid').first().focus();
                    }

                    // Submit
                    $form.on('submit', function(e) {
                        e.preventDefault();
                        clearErrors();

                        var formData = new FormData($form[0]);
                        var url = $form.attr('action');

                        $.ajax({
                            url: url,
                            method: $form.attr('method') || 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,

                            beforeSend: function () {
                                Swal.fire({
                                    title: 'Saving User...',
                                    text: 'Please wait...',
                                    allowOutsideClick: false,
                                    didOpen: () => Swal.showLoading()
                                });
                            },

                            success: function(response) {
                                Swal.close(); // remove loader

                                if (response.status === 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success!',
                                        text: response.message,
                                    }).then(() => {
                                        if (response.redirect_url) {
                                            window.location.href = response.redirect_url;
                                        } else {
                                            window.location.reload();
                                        }
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message || 'Something went wrong.',
                                    });
                                }
                            },

                            error: function(xhr) {
                                Swal.close(); // always close loader

                                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                                    showErrors(xhr.responseJSON.errors);
                                    return;
                                }

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON?.message || 'Unexpected error occurred.'
                                });
                            }
                        });

                    });
                });
            })(jQuery);
        });
    });
})();
</script>
@endpush