@extends('main-site.layouts.app')
@section('style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/toastr/toastr.css') }}">
@endsection
@section('content')
    <div class="account-section">
        <div class="form-tabs-section py-2">
            <ul class="nav nav-tabs def-tabs mb-0" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="personal-tab" data-bs-toggle="tab" data-bs-target="#personal"
                        type="button" role="tab" aria-selected="true">
                        {{ __('site.Account.Data') }}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="adduser-tab" data-bs-toggle="tab" data-bs-target="#adduser" type="button"
                        role="tab" aria-selected="false">
                        {{ __('site.Account.User_3') }}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password"
                        type="button" role="tab" aria-selected="false">
                        {{ __('messages.Password') }}
                    </button>
                </li>
            </ul>
            <div class="tab-content p-35 pt-4" id="myTabContent">
                <!-- personal Tab -->
                <div class="tab-pane fade show active" id="personal" role="tabpanel">
                    {{-- @dd(route($action.'.account.update')) --}}
                    <form class="main-form white form_submit" action="{{ route($action . 'account.update') }}"
                        method="POST">
                        @csrf
                        <div class="row align-items-end">
                            <div class="col-lg-12 mb-45">
                                <div id="image-preview"
                                    style="background-image: url({{ $data->image ? asset($data->image) : asset('main-site/assets/img/default-avatar.png') }});">
                                    <label for="image-upload" id="image-label"><i class="icon-camera"></i></label>
                                    <input type="file" name="image" id="image-upload" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __('site.Auth.Company_1') }}</label>
                                    <input type="text" class="form-control" name="name" value="{{ $data->name }}">
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __('messages.Email') }}</label>
                                    <input type="email" class="form-control" name="email" value="{{ $data->email }}">
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __('messages.Mobile') }}</label>
                                    <input id="phone" name="mobile" type="tel" class="form-control text-start"
                                        value="{{ $data->mobile }}" />
                                    <input type="hidden" id="country_code" value="{{ $data->mobile_country_code }}"
                                        name="mobile_country_code" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group mb-45">
                                    <label
                                        class="form-label dark-color mb-3 fw-600">{{ __('messages_301.Country') }}</label>
                                    <select id="select_country_id" name="country_id" class="form-select select_country_id">
                                        <option value="">-----</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}" @selected(old('country_id', $data->country_id == $country->id))>
                                                {{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __('messages_301.City') }}</label>
                                    <select id="select_city_id" name="city_id" class="form-select select_city_id">
                                        <option value="">-----</option>
                                        @foreach ($cities as $city)
                                            <option value="{{ $city->id }}" @selected(old('city_id', $data->city_id == $city->id))>
                                                {{ $city->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group mb-45">
                                    <button type="submit" class="main-btn w-100">{{ __('messages.Save') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>


                <!-- adduser Tab -->
                <div class="tab-pane fade" id="adduser" role="tabpanel">

                    @include('main-site.supplier.company.account.add_user')
                </div>
                <!-- password Tab -->
                <div class="tab-pane fade" id="password" role="tabpanel">
                    @include('main-site.supplier.company.account.password')
                </div>

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

    <!-- Modal -->
    <div class="def-modal modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0">
                <div class="modal-body p-0">
                    <h4 class="text-center dark-color fw-600 mb-3">{{ __('site.Account.User_3') }}</h4>
                    <p class="dark-color opacity-70 mb-2">{{ __('site.Account.User_4') }}</p>
                </div>
                <div class="modal-footer border-0 p-0 mt-45">
                    <button type="button" class="main-btn outline"
                        data-bs-dismiss="modal">{{ __('messages.Cancel') }}</button>
                    <button type="submit" id="confirmAddUser" class="main-btn text-center">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>

                        {{ __('messages.ADD NEW ') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    @include('main-site.supplier.products.inc.script_submit')
    @include('main-site.supplier.company.account.get_city_script')
    <script>
        $(function() {

            const input = $("#phone")[0];
            const iti = window.intlTelInput(input, {
                initialCountry: "{{ strtolower(App\Http\Helpers\HelperApp::get_alpha_2_by_country_code($data->mobile_country_code)['alpha_2']) }}", // Default country
                dialCode: "{{ $data->mobile_country_code }}",
                separateDialCode: true,
            });

            // Set the initial country code
            $("#country_code").val("+" + iti.getSelectedCountryData().dialCode);

            // Update the hidden input whenever the selected country changes
            $(input).on("countrychange", function() {
                $("#country_code").val("+" + iti.getSelectedCountryData().dialCode);
            });

            const form = document.querySelector('form');
            form.addEventListener('submit', function(event) {
                if (iti.isValidNumber()) {
                    const phoneNumber = iti.getNumber();
                    input.value = phoneNumber;
                } else {
                    event.preventDefault();
                    alert('Please enter a valid phone number.');
                }
            });
        })
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $.uploadPreview({
                input_field: "#image-upload", // Default: .image-upload
                preview_box: "#image-preview", // Default: .image-preview
                label_field: "#image-label", // Default: .image-label
                no_label: true // Default: false
            });
        });
    </script>

    <script>
        $(function() {
            $("#confirmAddUser").click(function(e) {
                // console.log('test');
                e.preventDefault(); // منع السلوك الافتراضي
                const $button = $(this);
                $button.attr("disabled", true); // تعطيل الزر أثناء الإرسال
                $button.find(".spinner-border").removeClass("d-none"); // إظهار التحميل
                $("#formSubAcc").submit();
            });
        })
    </script>
@endsection