@extends('layouts.app')
@php
    $title = isset($users) ? 'Edit User' : 'Create User';
@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"><br>
                                                <input type="text" class="form-control" name="name_ar" id="name_ar"
                                                value="{{ old('name_ar', $users->name_ar ?? '') }}" placeholder="Enter name in arabic">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="profile_photo">Profile Photo <span
                                                    class="text-danger">*</span></label>
                                            <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="profile_photo">Choose file</label>
                                                </div>
                                            </div>
                                            <div id="previewContainer"
                                                style="display:none; position: relative; width: 150px; margin-top: 10px;">
                                                <img id="previewImage" src="" alt="Preview"
                                                    style="width: 100%; border: 1px solid #ccc; padding: 5px; border-radius: 5px;">
                                                <button type="button" id="removePreview"
                                                    style="position: absolute; top: -10px; right: -10px; background: red; color: #fff;
               border: none; border-radius: 50%; padding: 3px 7px; cursor: pointer;">
                                                    ×
                                                </button>
                                            </div>
                                            @if (isset($users) && $users->profile_photo)
                                                <img src="{{ $users->user_profile_image_url }}" alt="User Image"
                                                    width="100" class="mt-2"
                                                    onerror="this.onerror=null; this.src='{{ asset('images/default-image.png') }}';">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <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"
                                                {{ isset($users) ? 'readonly' : '' }}>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="phone_number">Phone Number <span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="tel"
                                                    class="form-control @error('phone_number') is-invalid @enderror"
                                                    name="phone_number" id="phone_number" maxlength="15"
                                                    value="{{ old('phone_number', isset($users->phone_number) ? ltrim($users->phone_number, '+') : '') }}"
                                                    placeholder="Enter Country Code + Phone Number Ex. 974 34678904"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">

                                            </div>
                                            @error('phone_number')
                                                <div class="text-danger small mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="language">Language</label>
                                            <select class="custom-select select2" name="language">
                                                <option value="en"
                                                    {{ old('language', $users->language ?? '') == 'en' ? 'selected' : '' }}>
                                                    English</option>
                                                <option value="ar"
                                                    {{ old('language', $users->language ?? '') == 'ar' ? 'selected' : '' }}>
                                                    Arabic</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select class="custom-select select2" name="status">
                                                <option value="1"
                                                    {{ old('status', isset($users) ? $users->status : '') == 1 ? 'selected' : '' }}>
                                                    Active</option>
                                                <option value="0"
                                                    {{ old('status', isset($users) ? $users->status : '') == 0 ? 'selected' : '' }}>
                                                    In Active</option>
                                            </select>

                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <h4>Address Details</h4>
                                <div class="row">
                                    <input type="hidden" id="state_route" value="{{ route('getStates') }}">
                                    <div class="col-12 col-sm-2">
                                        <div class="form-group">
                                            <label>Country <span class="text-danger">*</span></label>
                                            <select class="form-control select2 countries select2" name="country"
                                                id="country" style="width: 100%;">
                                                <option value="">Select Country</option>
                                                @foreach ($countries as $key => $country)
                                                    <option value="{{ $key }}"
                                                        {{ old('country', isset($users) && $users->addresses->isNotEmpty() ? $users->addresses[0]->country_id : config('constant.qatar_id')) == $key ? 'selected' : '' }}>
                                                        {{ $country }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-2">
                                        <div class="form-group">
                                            <label>State <span class="text-danger">*</span></label>
                                            <select class="form-control select2 states select2" name="state"
                                                id="state" style="width: 100%;">
                                                <option value="">Select State</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-2">
                                        <input type="hidden" id="city_route" value="{{ route('getCities') }}">
                                        <div class="form-group">
                                            <label>City <span class="text-danger">*</span></label>
                                            <select class="form-control select2 city select2" name="city"
                                                id="city" style="width: 100%;">
                                                <option value="">Select City</option>
                                            </select>
                                        </div>
                                    </div>
                                    <input type="hidden" id="saved_state"
                                        value="{{ old('state', $users->addresses[0]->state_id ?? '') }}">
                                    <input type="hidden" id="saved_city"
                                        value="{{ old('city', $users->addresses[0]->city_id ?? '') }}">
                                    <div class="col-12 col-sm-2">
                                        <div class="form-group">
                                            <label>Latitude <span class="text-danger">*</span></label>
                                            <input type="text" name="latitute" class="form-control"
                                                value="{{ old('latitute', $users->addresses[0]->latitute ?? '') }}">
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-2">
                                        <div class="form-group">
                                            <label>Longitude <span class="text-danger">*</span></label>
                                            <input type="text" name="longitude" class="form-control"
                                                value="{{ old('longitude', $users->addresses[0]->longitude ?? '') }}">
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-2">
                                        <div class="form-group">
                                            <label>Address <span class="text-danger">*</span></label>
                                            <input type="text" name="address" class="form-control"
                                                value="{{ old('address', $users->addresses[0]->address ?? '') }}" placeholder="address"><br>
                                            <input type="text" name="address_ar" class="form-control"
                                            value="{{ old('address_ar', $users->addresses[0]->address_ar ?? '') }}" placeholder="address in arabic">
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-2">
                                        <div class="form-group">
                                            <label>Postal Code <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="postal_code"
                                                id="postal_code"
                                                value="{{ old('postal_code', $users->addresses[0]->postal_code ?? '') }}"
                                                placeholder="Enter postal code">
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-6">
                                        <div class="form-group">
                                            <label>Locality Or Street <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="locality_or_street"
                                                id="locality_or_street"
                                                value="{{ old('locality_or_street', $users->addresses[0]->locality_or_street ?? '') }}"
                                                placeholder="Enter localition or street"><br>
                                            <input type="text" class="form-control" name="locality_or_street_ar"
                                                id="locality_or_street_ar"
                                                value="{{ old('locality_or_street_ar', $users->addresses[0]->locality_or_street_ar ?? '') }}"
                                                placeholder="Enter localition or street in arabic">
                                        </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() {
            $('.select2').select2();

            $('.countries').select2({
                placeholder: "Select Country",
                allowClear: true
            });

            $('.states').select2({
                placeholder: "Select State",
                allowClear: true
            });

            $('.city').select2({
                placeholder: "Select City",
                allowClear: true
            });

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

            var savedState = $('#saved_state').val();
            var savedCity = $('#saved_city').val();
            var edit = "{{ isset($users) ? 'true' : 'false' }}";

            if (savedState || savedCity) {
                setTimeout(function() {
                    if (savedState) {
                        $('#state').val(savedState).trigger('change.select2');
                        console.log('Set state to:', savedState);
                    }
                    if (savedCity) {
                        setTimeout(function() {
                            $('#city').val(savedCity).trigger('change.select2');
                            console.log('Set city to:', savedCity);
                        }, 500);
                    }
                }, 500);
            }

            if (edit) {
                setTimeout(function() {
                    $('#state').trigger('change');
                }, 500);
            }

            // Custom validator: no leading space in input
            $.validator.addMethod("noLeadingSpaceInput", function(value, element) {
                return this.optional(element) || /^\S.*$/.test(value);
            }, "First character cannot be a space.");

            $.validator.addMethod("arabiconly", function(value, element) {
                return this.optional(element) || !/[A-Za-z]/.test(value);
            }, "Please enter Arabic letters and numbers only.");

             $.validator.addMethod("englishOnly", function (value, element) {
                return this.optional(element) || /^[A-Za-z ]+$/.test(value);
            }, "Please enter English letters and spaces only.");

            $.validator.addMethod("noArabic", function (value, element) {
                return this.optional(element) || !/[\u0600-\u06FF]/.test(value);
            }, "Arabic characters are not allowed.");

            $("#userForm").validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 100,
                        noLeadingSpaceInput: true,
                        englishOnly: true

                    },
                    name_ar: {
                        required: true,
                        maxlength: 100,
                        noLeadingSpaceInput: true,
                        arabiconly: true
                    },
                    profile_photo: {
                        required: edit ? false : true,
                        extension: "jpg|jpeg|png|tiff|tif|webp",
                        filesize: 5242880 // 5MB
                    },
                    email: {
                        required: true,
                        email: true,
                        pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                        remote: {
                            url: "{{ route('check-unique-field') }}",
                            type: "POST",
                            data: {
                                field_name: 'email',
                                field_value: function() {
                                    return $("#email").val().trim();
                                },
                                user_id: "{{ $users->id ?? '' }}",
                                _token: "{{ csrf_token() }}"
                            }
                        }
                    },
                    phone_number: {
                        required: true,
                        digits: true,
                        minlength: 11,
                        maxlength: 15,
                        pattern: /^(974)?[3-7]\d{7}$/,
                        remote: {
                            url: "{{ route('check-unique-field') }}",
                            type: "POST",
                            data: {
                                field_name: 'phone_number',
                                field_value: function() {
                                    return $("#phone_number").val().trim();
                                },
                                user_id: "{{ $users->id ?? '' }}",
                                _token: "{{ csrf_token() }}"
                            }
                        }
                    },
                    country: {
                        selectRequired: true
                    },
                    state: {
                        selectRequired: true
                    },
                    city: {
                        selectRequired: true
                    },
                    latitute: {
                        required: true,
                        noLeadingSpaceInput: true,
                        validLatitudeLongitude: true,
                    },
                    longitude: {
                        required: true,
                        noLeadingSpaceInput: true,
                        validLatitudeLongitude: true,
                    },
                    address: {
                        required: true,
                        noLeadingSpaceInput: true,
                        noArabic: true,
                    },
                    address_ar: {
                        required: true,
                        noLeadingSpaceInput: true,
                        arabiconly: true
                    },
                    postal_code: {
                        required: true,
                        digits: true,
                    },
                    locality_or_street: {
                        required: true,
                        noArabic: true,
                    },
                    locality_or_street_ar: {
                        required: true,
                        arabiconly: true
                    }
                },
                messages: {
                    name: {
                        required: "Please enter a name",
                        maxlength: "Name cannot exceed 100 characters",
                        englishOnly: "Only English letters and spaces are allowed"
                    },
                    name_ar: {
                        required: "Please enter a name in arabic",
                        maxlength: "Name cannot exceed 100 characters",
                        arabiconly: "Please enter Arabic letters and numbers only."
                    },
                    profile_photo: {
                        required: "Please upload an image",
                        extension: "Only image files (JPG, JPEG, PNG, TIFF, TIF, WEBP) are allowed",
                        filesize: "File must be less than 5MB"
                    },
                    email: {
                        required: "Please enter an email",
                        email: "Please enter a valid email",
                        remote: "This email is already taken."
                    },
                    phone_number: {
                        required: "Please enter a phone number",
                        digits: "Please enter only numbers",
                        pattern: "Please enter a valid Qatar phone number",
                        remote: "This phone number is already taken."
                    },
                    country: {
                        selectRequired: "Please select a country"
                    },
                    state: {
                        selectRequired: "Please select a state"
                    },
                    city: {
                        selectRequired: "Please select a city"
                    },
                    latitute: {
                        required: "Please enter latitude",
                        validLatitudeLongitude: "Please enter a valid latitude",
                    },
                    longitude: {
                        required: "Please enter longitude",
                        validLatitudeLongitude: "Please enter a valid longitude",
                    },
                    address: {
                        required: "Please enter an address",
                        noArabic: "Arabic characters are not allowed."
                    },
                    address_ar: {
                        required: "Please enter an address in arabic",
                        arabiconly: "Please enter Arabic letters and numbers only."
                    },
                    postal_code: {
                        required: "Please enter a postal code"
                    },
                    locality_or_street: {
                        required: "Please enter a locality or street ",
                        noArabic: "Arabic characters are not allowed."
                    },
                    locality_or_street_ar: {
                        required: "Please enter a locality or street in arabic",
                        arabiconly: "Please enter Arabic letters and numbers only."
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    if (element.hasClass("select2-hidden-accessible")) {
                        error.addClass('invalid-feedback');
                        element.next(".select2-container").after(error);
                    } else {
                        error.addClass('invalid-feedback');
                        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) {
                    form.submit();
                }
            });
            $.validator.addMethod("validLatitudeLongitude", function(value, element) {
                return /^-?\d+(\.\d{1,13})?$/.test(value); // This regex allows up to 4 decimal places
            }, "Please enter a valid latitude/longitude.");

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

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

            $.validator.addMethod('filesize', function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, 'File size must be less than 1MB.');

            $("#storeUser").click(function(e) {
                if ($("#userForm").valid()) {
                    $("#userForm").submit();
                }
            });
            document.getElementById('profile_photo').addEventListener('change', function(e) {
                let file = e.target.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        document.getElementById('previewImage').src = event.target.result;
                        document.getElementById('previewContainer').style.display = 'block';
                    }
                    reader.readAsDataURL(file);

                    // Show file name in label
                    this.nextElementSibling.innerText = file.name;
                }
            });

            // Remove button click
            document.getElementById('removePreview').addEventListener('click', function() {
                let input = document.getElementById('profile_photo');
                input.value = ""; // reset file input
                input.nextElementSibling.innerText = "Choose file"; // reset label
                document.getElementById('previewContainer').style.display = 'none';
            });
        });
    </script>
@endsection