@extends('layouts.app')

@section('content')
    <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_edit') }}</li>
                </ol>
            </div>

        </div>
        <div>
            <div class="card-body">

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

                {{-- <div class="row daes-top-sec mb-3">

				<div class="col-lg-6 col-md-6">
					<a href="{{route('orders','userId='.$id)}}">

						<div class="card">

							<div class="flex-row">

								<div class="p-10 bg-info col-md-12 text-center">

									<h3 class="text-white box m-b-0"><i class="mdi mdi-cart"></i></h3>
								</div>

								<div class="align-self-center pt-3 col-md-12 text-center">

									<h3 class="m-b-0 text-info" id="total_orders">0</h3>

									<h5 class="text-muted m-b-0">{{trans('lang.dashboard_total_orders')}}</h5>

								</div>

							</div>

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

				<div class="col-lg-6 col-md-6">
					<a href="{{route('users.walletstransaction',$id)}}">
						<div class="card">

							<div class="flex-row">

								<div class="p-10 bg-info col-md-12 text-center">

									<h3 class="text-white box m-b-0"><i class="mdi mdi-bank"></i></h3>
								</div>

								<div class="align-self-center pt-3 col-md-12 text-center">

									<h3 class="m-b-0 text-info" id="wallet_amount">0</h3>

									<h5 class="text-muted m-b-0">{{trans('lang.wallet_Balance')}}</h5>

								</div>

							</div>

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

			</div> --}}

                <div class="error_top"></div>
                @include('alerts.error_messages')
                <form action="{{ route('users.update', $customer->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row restaurant_payout_create">
                        <div class="restaurant_payout_create-inner">

                            <fieldset>
                                <legend>{{ trans('lang.user_edit') }}</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" class="form-control user_first_name" name="first_name"
                                            value="{{ $customer->first_name }}"
                                            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 class="form-group row width-50">
                                    <label class="col-3 control-label">{{ trans('lang.last_name') }}</label>
                                    <div class="col-7">
                                        <input type="text" name="last_name" value="{{ $customer->last_name }}"
                                            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" value="{{ $customer->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.user_phone') }}</label>
                                <div class="col-7">
                                    <input type="text" class="form-control user_phone"
                                        onkeypress="return chkAlphabets2(event,'error2')">
                                    <div id="error2" class="err"></div>
                                    <div class="form-text text-muted w-50">
                                        {{ trans('lang.user_phone_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', $customer->phone ?? '') }}" />
                                    </div>

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

                                    <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 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>
                                @if ($customer->getMedia('profile_pic')->count())
                                    <table class="table mt-3">
                                        <thead>
                                            <tr>
                                                <th>{{ trans('lang.image') }}</th>
                                                <th>{{ trans('lang.actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($customer->getMedia('profile_pic') as $media)
                                                <tr>
                                                    <td>
                                                        <img src="{{ $media->getUrl() }}" alt="Logo"
                                                            class="img-thumbnail" style="width: 150px;">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-danger btn-sm"
                                                            onclick="deleteMedia({{$customer->id}}, {{$media->id}})">
                                                            ✕ Delete
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            </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"
                                                @if ($customer->is_active == 1) checked @endif>
                                            <label class="col-3 control-label"
                                                for="user_active">{{ trans('lang.active') }}</label>
                                        </div>
                                    </div>

                                    <div class="form-check mb-3">
                                        <input type="checkbox" id="reset_password" class="form-check-input">
                                        <label class="form-check-label"
                                            for="reset_password">{{ trans('lang.reset_password') }}</label>
                                        {{-- <div class="form-text text-muted w-100">
                                        {{ trans('lang.note_reset_password_email') }}
                                    </div> --}}
                                    </div>

                                    <div id="reset_password_fields" style="display: none;">
                                        <div class="form-group row">
                                            <label for="new_password" class="col-3 control-label">New Password</label>
                                            <div class="col-7">
                                                <input type="password" name="new_password" id="new_password"
                                                    class="form-control" placeholder="Enter new password">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-3"></div>
                                            <div class="col-7">
                                                <button type="button"
                                                    onclick="resetPassword('{{ route('users.reset-password', [$customer->id]) }}')"
                                                    class="btn btn-warning">Reset Password</button>
                                            </div>
                                        </div>
                                    </div>



                                </div>
                            </fieldset>


                        </div>
                    </div>
            </div>
            <div class="form-group col-12 text-center btm-btn">
                <button type="submit" class="btn btn-primary  save_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>
            <form id="reset-password-form" action="{{ route('users.reset-password', $customer->id) }}" method="POST"
                style="display: none;">
                @csrf
                <input type="hidden" name="new_password" id="reset_password_input">
            </form>
        </div>
    </div>
    <form id="delete-media-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
@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>
        function chkAlphabets(event, msg) {
            if (!(event.which >= 97 && event.which <= 122) && !(event.which >= 65 && event.which <= 90)) {
                document.getElementById(msg).innerHTML = "Accept only Alphabets";
                return false;
            } else {
                document.getElementById(msg).innerHTML = "";
                return true;
            }
        }

        function chkAlphabets2(event, msg) {
            if (!(event.which >= 48 && event.which <= 57)) {
                document.getElementById(msg).innerHTML = "Accept only Number";
                return false;
            } else {
                document.getElementById(msg).innerHTML = "";
                return true;
            }
        }

        function chkAlphabets3(event, msg) {
            if (!((event.which >= 48 && event.which <= 57) || (event.which >= 97 && event.which <= 122))) {
                document.getElementById(msg).innerHTML = "Special characters not accepted ";
                return false;
            } else {
                document.getElementById(msg).innerHTML = "";
                return true;
            }
        }
    </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>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkbox = document.getElementById('reset_password');
            const fields = document.getElementById('reset_password_fields');

            checkbox.addEventListener('change', function() {
                fields.style.display = checkbox.checked ? 'block' : 'none';
            });
        });

        function resetPassword(url) {

            console.log(url);
            const password = document.getElementById('new_password').value;

            if (!password) {
                alert('Please enter a new password.');
                return;
            }

            const form = document.getElementById('reset-password-form');
            form.action = url;

            // Set the password into the hidden form's input
            document.getElementById('reset_password_input').value = password;

            form.submit();
        }

        function deleteMedia(productId,mediaId) {
            if (confirm('Are you sure you want to delete this image?')) {
                const form = document.getElementById('delete-media-form');
               form.action = `/products/${productId}/media/${mediaId}`;
               
                form.submit();
            }
        }
    </script>
@endsection