@extends('layouts.app')
@php
    $title = isset($users) ? 'Edit User' : 'Create User';
    $type = config('constant.gender_type');
    $categoryType = config('constant.category_type');
    $imageValidation = config('constant.image_validation');
@endphp
@section('title', $title)
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Users</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $title }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{{ $title }}</h3>
                        </div>


                        <form id="userForm"
                            action="{{ isset($users) ? route('users.update', $users->id) : route('users.store') }}"
                            method="post" enctype="multipart/form-data">
                            @csrf
                            @if (isset($users))
                                @method('PUT')
                            @endif

                            <div class="card-body">
                                <h4>Personal Information</h4>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="name">Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="name" id="name"
                                                value="{{ old('name', $users->name ?? '') }}" placeholder="Enter name">

                                        </div>
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="user_name">Username<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="user_name" id="user_name"
                                                value="{{ old('user_name', $users->user_name ?? '') }}" placeholder="Enter username">
                                            @error('user_name')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="image">Image <span class="text-danger">*</span></label>
                                            <small>(aspect ratio 110*110, Image size: 5MB)</small>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" name="profile_photo"
                                                        id="profile_photo" accept="image/*">
                                                    <label class="custom-file-label" for="image">Choose file</label>
                                                </div>
                                            </div>
                                            @if (isset($users) && $users->profile_photo)
                                                <img src="{{ $users->user_profile_image_url }}" alt="Profile Image"
                                                    width="100" class="mt-2">
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="email">Email<span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" name="email" id="email"
                                                value="{{ old('email', $users->email ?? '') }}" placeholder="Enter email">
                                            @error('email')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="email">Phone Number<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="phone_number" id="phone_number"
                                                value="{{ old('phone_number', $users->phone_number ?? '') }}"
                                                placeholder="Enter phone number">
                                            @error('phone_number')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Status<span class="text-danger">*</span></label>
                                            <select class="custom-select" name="status">
                                                <option value="1"
                                                    {{ old('status', $users->status ?? 1) == 1 ? 'selected' : '' }}>Active
                                                </option>
                                                <option value="0"
                                                    {{ old('status', $users->status ?? 1) == 0 ? 'selected' : '' }}>In
                                                    Active</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{{ route('users.list') }}" class="btn btn-secondary">Cancel</a>
                                <button type="button" id="storeUser"
                                    class="btn btn-primary">{{ isset($users) ? 'Update' : 'Submit' }}</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('scripts')
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/additional-methods.min.js') }}"></script>
    <script src="{{ asset('js/custom.js') }}"></script>
   <script>
    $(document).ready(function () {

        var allowedExtensions = @json($imageValidation['allowed_extensions']);
        var maxSizeBytes = {{ $imageValidation['max_size_bytes'] }};
        var maxSizeMB = {{ $imageValidation['max_size_mb'] }};

        // Initialize select2
        $('.countries, .states, .city').select2({
            placeholder: "Select an option",
            allowClear: true
        });

        $('#country').trigger('change');

        var edit = "{{ isset($users) }}";
        if (edit) {
            setTimeout(function () {
                $('#state').trigger('change');
            }, 500);
        }

        // Custom method: no only spaces allowed

    $.validator.addMethod("noLeadingSpace", function (value, element) {
        return this.optional(element) || /^\S.*$/.test(value);
    }, "First character cannot be a space.");

        // Custom method: file size validation
        $.validator.addMethod("filesize", function (value, element, param) {
            if (element.files.length === 0) return true;
            return element.files[0].size <= param;
        }, "File size must be less than {0} bytes.");

    // ✅ Only alphabets and spaces
    $.validator.addMethod("onlyAlphabet", function (value, element) {
        return this.optional(element) || /^[A-Za-z\s]+$/.test(value);
    }, "Only alphabets are allowed.");

        // Custom validation for image file type
        $.validator.addMethod("imageFileType", function(value, element) {
            if (element.files.length === 0) {
                return true; // Skip validation if no file selected
            }
            var extension = value.split('.').pop().toLowerCase();
            return allowedExtensions.indexOf(extension) !== -1;
        }, "Please upload a valid image file (" + allowedExtensions.join(', ') + ")");

        // Custom validation for file size
        $.validator.addMethod("imageFileSize", function(value, element) {
            if (element.files.length === 0) {
                return true; // Skip validation if no file selected
            }
            return element.files[0].size <= maxSizeBytes;
        }, "Image size must not exceed " + maxSizeMB + "MB");

        // Initialize form validation
        $("#userForm").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 100,
                    noLeadingSpace: true,
                    onlyAlphabet: true
                },
                user_name: {
                    required: true,
                    maxlength: 100,
                    noLeadingSpace: true
                },
                profile_photo: {
                    required: function () {
                        return edit !== '1';
                    },
                    imageFileType: true,
                    imageFileSize: true
                },
                email: {
                    required: true,
                    email: true,
                    noLeadingSpace: true
                },
                phone_number: {
                    required: true,
                    noLeadingSpace: true,
                    digits: true,
                    minlength: 8,
                    maxlength: 15,
                    pattern: /^(\+?974)?[3-7]\d{7}$/,
                }
            },
            messages: {
                name: {
                    required: "Please enter a name",
                    maxlength: "Name cannot exceed 100 characters",
                    noLeadingSpace: "First character cannot be a space.",
                    onlyAlphabet: "Only alphabets and spaces allowed"
                },
                user_name: {
                    required: "Please enter a username",
                    maxlength: "Username cannot exceed 100 characters",
                    noLeadingSpace: "First character cannot be a space."
                },
                profile_photo: {
                    required: "Please upload an image",
                    imageFileType: "Only image files (JPG, JPEG, PNG) are allowed",
                    imageFileSize: "File must be less than 1MB"
                },
                email: {
                    required: "Please enter an email",
                    email: "Please enter a valid email"
                },
                phone_number: {
                    required: "Please enter a phone number",
                    noLeadingSpace: "First character cannot be a space.",
                    digits: "Please enter only numbers",
                    minlength: "Phone number must be at least 8 digits",
                    maxlength: "Phone number cannot exceed 15 digits",
                    pattern: "Please enter a valid Qatar phone number"
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                if (element.hasClass("select2-hidden-accessible")) {
                    element.next(".select2-container").after(error);
                } else {
                    element.closest('.form-group').append(error);
                }
            },
            highlight: function (element) {
                if ($(element).hasClass("select2-hidden-accessible")) {
                    $(element).next(".select2-container").find(".select2-selection").addClass('is-invalid');
                } else {
                    $(element).addClass('is-invalid');
                }
            },
            unhighlight: function (element) {
                if ($(element).hasClass("select2-hidden-accessible")) {
                    $(element).next(".select2-container").find(".select2-selection").removeClass('is-invalid');
                } else {
                    $(element).removeClass('is-invalid');
                }
            },
            submitHandler: function (form) {
                // Trim all text inputs before submitting
                $('input[type="text"]').each(function () {
                    $(this).val($.trim($(this).val()));
                });
                form.submit();
            }
        });

        // Select2 placeholder validation (if needed)
        $.validator.addMethod("selectRequired", function (value, element) {
            return value !== "" && value !== "Select Country" && value !== "Select State" && value !== "Select City";
        }, "This field is required");

        // Show filename in input
        $('#profile_photo').on('change', function () {
            var fileName = $(this).val().split("\\").pop();
            $(this).next('.custom-file-label').addClass("selected").html(fileName);
        });

        // Handle form submit
        $("#storeUser").click(function (e) {
            if ($("#userForm").valid()) {
                $("#userForm").submit();
            }
        });
    });
</script>

@endsection