@extends('layouts.app')

@section('content')
    <style>
        label.error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
            display: block;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />
    <div class="page-wrapper">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">{{ trans('lang.user_plural') }}</h3>
            </div>

            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{!! route('users') !!}">{{ trans('lang.user_plural') }}</a></li>
                    <li class="breadcrumb-item active">{{ trans('lang.user_create') }}</li>
                </ol>
            </div>
            <div>
                <form action="{{ route('users.store') }}" id="user_form" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">

                        <div id="data-table_processing" class="dataTables_processing panel panel-default"
                            style="display: none;">{{ trans('lang.processing') }}</div>
                        <div class="error_top"></div>

                        <div class="row restaurant_payout_create">
                            <div class="restaurant_payout_create-inner">
                                <fieldset>
                                    <legend>{{ trans('lang.user_details') }}</legend>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.first_name') }}</label>
                                        <div class="col-7">
                                            <input type="text" name="first_name" class="form-control user_first_name"
                                                id="firstname" onkeypress="return chkAlphabets(event,'error')">
                                            <div id="error" class="err"></div>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_first_name_help') }}
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div id="first_name_error" class="text-danger"></div> --}}
                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.last_name') }}</label>
                                        <div class="col-7">
                                            <input name="last_name" type="text" class="form-control user_last_name"
                                                onkeypress="return chkAlphabets(event,'error1')">
                                            <div id="error1" class="err"></div>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_last_name_help') }}
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.email') }}</label>
                                        <div class="col-7">
                                            <input type="text" name="email" class="form-control user_email">
                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_email_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.password') }}</label>
                                        <div class="col-7">
                                            <input type="password" name="password" class="form-control user_password">
                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_password_help') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">Phone</label>
                                        <div class="col-7 d-flex align-items-start">
                                            <input id="phone" type="tel" name="phone_display" class="form-control"
                                                value="{{ old('phone_number', $phone_number ?? '') }}" />
                                        </div>

                                        <input type="hidden" name="phone_country_code" id="phone_country_code"
                                            value="{{ old('phone_country_code', $phone_country_code ?? '') }}">
                                        <input type="hidden" name="phone_number" id="phone_number"
                                            value="{{ old('phone_number', $phone_number ?? '') }}">

                                        <div id="phone_error" class="text-danger"></div>
                                        <small class="form-text text-muted w-50">Enter your phone number with
                                            country.</small>
                                    </div>



                                    <div class="form-group row width-100">
                                        <label class="col-3 control-label">{{ trans('lang.profile_picture') }}</label>
                                        <input name="profile_pic" type="file" onChange="handleFileSelect(event)"
                                            class="col-7">
                                        <div class="placeholder_img_thumb user_image"></div>
                                        <div id="uploding_image"></div>
                                        <div class="form-text text-muted">
                                            {{ trans('lang.profile_picture_help') }}
                                        </div>
                                    </div>
                                </fieldset>

                                <fieldset>
                                    <legend>{{ trans('user') }} {{ trans('lang.active_deactive') }}</legend>
                                    <div class="form-group row">

                                        <div class="form-group row width-50">
                                            <div class="form-check width-100">
                                                <input type="checkbox" name="is_active" class="user_active" id="user_active">
                                                <label class="col-3 control-label"
                                                    for="user_active">{{ trans('lang.active') }}</label>
                                            </div>
                                        </div>

                                    </div>
                                </fieldset>

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

                    <div class="form-group col-12 text-center btm-btn">
                        <button type="submit" class="btn btn-primary  create_user_btn"><i class="fa fa-save"></i>
                            {{ trans('lang.save') }}</button>
                        <a href="{!! route('users') !!}" class="btn btn-default"><i
                                class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                    </div>
                </form>
            </div>

        </div>

    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"></script>
    <script>
        $(document).ready(function() {
          
            $("#user_form").validate({
                rules: {
                    first_name: {
                        required: true,
                        minlength: 2
                    },
                    last_name: {
                        required: true,
                        minlength: 2
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    phone: {
                        required: true,
                        minlength: 10,
                        phoneIntl: true,
                    }
                },
                messages: {
                    first_name: {
                        required: "First name is required"
                    },
                    last_name: {
                        required: "Last name is required"
                    },
                    email: {
                        required: "Email is required",
                        email: "Enter a valid email"
                    },
                    password: {
                        required: "Password is required",
                        minlength: "Password must be at least 6 characters"
                    },
                    phone: {
                        required: "Phone number is required",
                        phoneIntl: "Enter a valid phone number"
                    }
                },


            });

            $.validator.addMethod("phoneIntl", function(value, element) {
                return iti.isValidNumber();
            }, "Please enter a valid phone number.");

            // On form submission: get full formatted number
            $('.create_user_btn').on('click', function() {
                if ($("#user_form").valid()) {
                    var fullNumber = iti.getNumber(); // E.164 format: +123456789
                    console.log("Full Phone:", fullNumber);
                    // Now submit either via AJAX or hidden field
                }
            });
        });


        
    </script>

    <script>
    document.addEventListener("DOMContentLoaded", function () {
        const input = document.querySelector("#phone");
        if (!input) return;

        const iti = window.intlTelInput(input, {
            separateDialCode: true,
            initialCountry: "auto",
            geoIpLookup: function (callback) {
                fetch("https://ipinfo.io?token=YOUR_TOKEN")  // ← Optional, replace with your token or remove
                    .then(res => res.json())
                    .then(data => callback(data.country))
                    .catch(() => callback("us"));
            },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
        });

        // Restore existing values (Edit case)
        const storedCode = document.getElementById("phone_country_code").value;
        const storedNumber = document.getElementById("phone_number").value;
        if (storedCode) {
            const countryData = iti.getSelectedCountryData();
            const allCountries = window.intlTelInputGlobals.getCountryData();
            const match = allCountries.find(c => `+${c.dialCode}` === storedCode);
            if (match) {
                iti.setCountry(match.iso2);
            }
        }
        if (storedNumber) {
            input.value = storedNumber;
        }

        // On form submit: update hidden fields
        input.form.addEventListener("submit", function () {
            const selected = iti.getSelectedCountryData();
            document.getElementById("phone_country_code").value = `+${selected.dialCode}`;
            document.getElementById("phone_number").value = input.value.trim();
        });
    });
</script>

@endsection