@extends('layouts.app')
@section('title', 'Edit Profile')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Edit Profile</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">Edit Profile</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">Edit Profile</h3>
                    </div>

                    <form id="userForm" action="{{ route('profile.update', $user->id) }}" method="POST" enctype="multipart/form-data">

                        @csrf
                        @method('PUT')

                        <div class="card-body">
                            <h4>Personal Information</h4>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control" name="name" id="name"
                                            value="{{ old('name', $user->name ?? '') }}" placeholder="Enter name">
                                        <br>
                                        <input type="text" class="form-control" name="a_name" id="a_name"
                                            value="{{ old('a_name', $user->a_name ?? '') }}"
                                            placeholder="Enter name in Arabic">
                                    </div>
                                    @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    @error('a_name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="profile_photo">Profile Photo</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" name="profile_photo"
                                                    id="profile_photo">
                                                <label class="custom-file-label" for="profile_photo">Choose file</label>
                                            </div>
                                        </div>
                                        @if (isset($user) && $user->profile_photo)
                                        <img src="{{ $user->user_profile_image_url }}"
                                            alt="User Image" width="100" class="mt-2">
                                        @endif
                                        @error('profile_photo')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="email" class="form-control" name="email" id="email"
                                            value="{{ old('email', $user->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</label>
                                        <input type="text" class="form-control" name="phone_number" id="phone_number"
                                            value="{{ old('phone_number', $user->phone_number ?? '') }}"
                                            placeholder="Enter phone number">
                                        @error('phone_number')
                                        <span class="text-danger">{{ $message }}</span>
                                        @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" name="language">
                                            <option value="en"
                                                {{ old('language', $user->language ?? '') == 'en' ? 'selected' : '' }}>
                                                English</option>
                                            <option value="ar"
                                                {{ old('language', $user->language ?? '') == 'ar' ? 'selected' : '' }}>
                                                Arabic</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select class="custom-select" name="status">
                                            <option value="1"
                                                {{ old('status', $user->status ?? 1) == 1 ? 'selected' : '' }}>Active
                                            </option>
                                            <option value="0"
                                                {{ old('status', $user->status ?? 1) == 0 ? 'selected' : '' }}>In
                                                Active</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Role</label>
                                        <select class="custom-select" name="role">
                                            <option value="">Select Role</option>
                                            @foreach ($roles as $role)
                                            <option value="{{ $role->id }}"
                                                {{ old('role', $user->role_id ?? '') == $role->id ? 'selected' : '' }}>
                                                {{ $role->name }}
                                            </option>
                                            @endforeach
                                        </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</label>
                                        <select class="form-control select2 countries" name="country" id="country"
                                            style="width: 100%;">
                                            <option value="">Select Country</option>
                                            @foreach ($countries as $key => $country)
                                            <option value="{{ $key }}"
                                                {{ old('country', isset($user) && $user->addresses->isNotEmpty() ? $user->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</label>
                                        <select class="form-control select2 states" 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</label>
                                        <select class="form-control select2 city" name="city" id="city"
                                            style="width: 100%;">
                                            <option value="">Select City</option>
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" id="saved_state"
                                    value="{{ old('state', $user->addresses[0]->state_id ?? '') }}">
                                <input type="hidden" id="saved_city"
                                    value="{{ old('city', $user->addresses[0]->city_id ?? '') }}">
                                <div class="col-12 col-sm-2">
                                    <div class="form-group">
                                        <label>Latitude</label>
                                        <input type="text" name="latitude" class="form-control"
                                            value="{{ old('latitude', $user->addresses[0]->latitude ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-12 col-sm-2">
                                    <div class="form-group">
                                        <label>Longitude</label>
                                        <input type="text" name="longitude" class="form-control"
                                            value="{{ old('longitude', $user->addresses[0]->longitude ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-12 col-sm-2">
                                    <div class="form-group">
                                        <label>Address</label>
                                        <input type="text" name="address" class="form-control"
                                            value="{{ old('address', $user->addresses[0]->address ?? '') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="{{ route('users.list') }}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">{{ isset($user) ? '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() {
        $('.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);
        }
        $("#userForm").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 100
                },
                a_name: {
                    required: true,
                    maxlength: 100
                },
                profile_photo: {
                    required: edit ? false : true,
                    extension: "jpg|jpeg|png|gif",
                    filesize: 1048576 // 1MB
                },
                email: {
                    required: true,
                    email: true
                },
                phone_number: {
                    required: true,
                    digits: true,
                    minlength: 8,
                    maxlength: 15,
                    pattern: /^(\+?974)?[3-7]\d{7}$/
                },
                country: {
                    selectRequired: true
                },
                state: {
                    selectRequired: true
                },
                city: {
                    selectRequired: true
                },
                latitude: {
                    required: true
                },
                longitude: {
                    required: true
                },
                address: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: "Please enter a name",
                    maxlength: "Name cannot exceed 100 characters"
                },
                a_name: {
                    required: "Please enter a name in Arabic",
                    maxlength: "Name cannot exceed 100 characters"
                },
                profile_photo: {
                    required: "Please upload an image",
                    extension: "Only image files (JPG, JPEG, PNG, GIF) are allowed",
                    filesize: "File must be less than 1MB"
                },
                email: {
                    required: "Please enter an email",
                    email: "Please enter a valid email"
                },
                phone: {
                    required: "Please enter a phone number",
                    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"
                },
                country: {
                    selectRequired: "Please select a country"
                },
                state: {
                    selectRequired: "Please select a state"
                },
                city: {
                    selectRequired: "Please select a city"
                },
                latitude: {
                    required: "Please enter latitude"
                },
                longitude: {
                    required: "Please enter longitude"
                },
                address: {
                    required: "Please enter a address"
                }
            },
            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("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();
            }
        });
    });
</script>
@endsection