@extends('backend.layouts.app')
@section('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/css/intlTelInput.css">
<style>
    .iti {
        width: 100% !important;
    }

    .profile-img {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #ddd;
    }

    .img-upload {
        position: relative;
        display: inline-block;
    }

    .img-upload input[type="file"] {
        position: absolute;
        opacity: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
    }
    #map {
        height: 400px;
        width: 100%;
    }

</style>

@endsection
@section('title', "Create User Details")
@section('content')

<form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="image" class="form-label">Profile Picture <span class="text-danger">*</span></label>
                            <div class="mb-2">
                                <img src="{{ asset('default-images/default_user_image.jpg') }}" id="profile-img" class="profile-img" alt="" />
                            </div>
                            <input type="file" class="form-control" id="image" name="image" accept="image/*" onchange="previewImage(event)" />
                            @error('image')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="city_id" class="form-label">City<span class="text-danger">*</span></label>
                            <select name="city_id" id="city_id" class="form-select" required>
                                @foreach($cities as $city)
                                <option value="{{ $city->id }}" @if(old('city_id')==$city->id) selected @endif>{{ $city->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="first_name" class="form-label">First Name<span class="text-danger">*</span></label>
                            <input type="text" name="first_name" id="first_name" class="form-control" value="{{ old('first_name') }}" required>
                        </div>
                        <div class="col">
                            <label for="last_name" class="form-label">Last Name<span class="text-danger">*</span> </label>
                            <input type="text" name="last_name" id="last_name" class="form-control" value="{{ old('last_name') }}" required>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="email" class="form-label">Email<span class="text-danger">*</span></label>
                            <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}" required>
                        </div>
                        <div class="col">
                            <label for="email_verified_at" class="form-label">Email Verified At<span class="text-danger">*</span></label>
                            <input type="datetime-local" name="email_verified_at" id="email_verified_at" class="form-control" value="{{ old('email_verified_at') }}" required>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="password" class="form-label">Password<span class="text-danger">*</span></label>
                            <input type="password" name="password" id="password" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="address" class="form-label">Address<span class="text-danger">*</span></label>
                            <textarea name="address" id="address" class="form-control" required>{{ old('address') }}</textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col">
                            <label class="form-label" for="map">{{ __("routes.select-your-location-on-map") }}
                                <small
                                    class="text-danger">*</small></label>
                            <div id="map" class="mb-3"></div>
                            <input type="text" readonly id="latitude" name="latitude" required>
                            <input type="text" readonly id="longitud" name="longitud" required>
                        </div>
                    </div>
                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form-group row mb-3">
                        <div class="col-6">
                            <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone" id="phone" required />
                            <input type="hidden" class="form-control @error('country_code') is-invalid @enderror" name="country_code" id="country_code" required />
                            @error('country_code')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                            @error('phone')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="points" class="form-label">Points<span class="text-danger">*</span></label>
                            <input type="number" name="points" id="points" class="form-control" value="{{ old('points') ?? 0 }}" required>
                        </div>
                        <div class="col">
                            <label for="wallet_balance" class="form-label">Wallet Balance<span class="text-danger">*</span></label>
                            <input type="number" name="wallet_balance" id="wallet_balance" class="form-control" value="{{ old('wallet_balance') ?? 0 }}" required>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="subscription_status" class="form-label">Subscription Status<span class="text-danger">*</span></label>
                            <select name="subscription_status" id="subscription_status" class="form-control" required>
                                @foreach(\App\Enums\UserSubscriptionStatus::getValues() as $key => $value)
                                <option value="{{ $value }}" {{ old('subscription_status') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col">
                            <label for="account_status" class="form-label">Account Status<span class="text-danger">*</span></label>
                            <select name="account_status" id="account_status" class="form-control" required>
                                @foreach(\App\Enums\UserAccountStatus::getValues() as $key => $value)
                                <option value="{{ $value }}" {{ old('account_status') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>


@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/intlTelInput.min.js"></script>

<script>
    function previewImage(event) {
        const output = document.getElementById('profile-img');
        output.src = URL.createObjectURL(event.target.files[0]);
    }

</script>

<script>
    const input = document.querySelector("#phone");
    // initial value
    document.getElementById("country_code").value = "971";
    var iti = window.intlTelInput(input, {
        customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
            return "e.g. " + selectedCountryPlaceholder;
        }
        , preferredCountries: ['qa', 'ae']
        , showSelectedDialCode: true
        , separateDialCode: true
        , countrySearch: false
        , autoInsertDialCode: true
        , autoPlaceholder: "polite"
        , nationalMode: false
        , fixDropdownWidth: false
        , useFullscreenPopup: false
        , utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/utils.js"
    });

    input.addEventListener("countrychange", function() {
        const countryData = iti.getSelectedCountryData();
        document.getElementById("country_code").value = countryData.dialCode;
    });

</script>

<script>
    // Initialize the map and set default location
    function initMap() {
        const defaultLocation = {lat: -34.397, lng: 150.644}; // Default location

        const map = new google.maps.Map(document.getElementById("map"), {
            center: defaultLocation,
            zoom: 8,
        });

        const marker = new google.maps.Marker({
            position: defaultLocation,
            map: map,
        });

        // Add a click event listener to the map
        map.addListener("click", function (event) {
            // Get latitude and longitud from the click event
            const clickedLocation = event.latLng;
            const lat = clickedLocation.lat();
            const lng = clickedLocation.lng();

            // Update the marker position
            marker.setPosition(clickedLocation);

            // Set the latitude and longitud values in the input fields
            document.getElementById("latitude").value = lat;
            document.getElementById("longitud").value = lng;
        });
    }
</script>

<!-- Google Maps API script -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpGhFuvKcNpH-9Gl4mpGrz03gRjpEYnN8&callback=initMap&libraries=places"
        async defer></script>

@endsection