@extends('site.layouts.app')
@section('style')
@endsection
@section('content')
    <div class="account-section sec-padding bg-grey">
        <div class="container">
            <p class="dark-color mb-4"><span class="opacity-60">{{ __('site.Auth.Account') }}</span> /
                {{ __('site.Auth.Complete_1') }}</p>
            <div class="step-app" id="demo">
                <ul class="step-steps">
                    <li data-step-target="step1">
                        <span class="circle"></span>
                        <span class="step-num dark-color opacity-80 sm-text">{{ __('site.Auth.First') }}</span>
                        <h4 class="fw-600 dark-color my-1">{{ __('site.Auth.Complete_2') }}</h4>
                        <span class="state primary-color sm-text">{{ __('site.Auth.Processing') }}</span>
                    </li>

                </ul>
                <form class="step-content main-form form_submit white rounded-xl def-bg shadow border-0 p-5 mt-5"
                    method="POST" action="{{ route('saudi.complete_register') }}" enctype="multipart/form-data">
                    <!-- step 1 -->
                    @csrf


                    <!-- step 2 -->
                    <div class="step-tab-panel" data-step="step1">
                        <h3 class="dark-color fw-600 text-center mb-2">{{ __('site.Auth.Complete_6') }}</h3>
                        <p class="dark-color opacity-70 text-center mb-5">{{ __('site.Auth.Complete_5') }}</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-45">
                                    <label
                                        class="form-label dark-color mb-3 fw-600">{{ __('messages_301.Main categories') }}</label>
                                    <select class="form-select select_department select2" name="departments[]" multiple>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}">
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-45">
                                    <label
                                        class="form-label dark-color mb-3 fw-600">{{ __('messages_301.Sub categories') }}</label>
                                    <select class="form-select select_sub_department select2" name="sub_departments[]"
                                        multiple>
                                        <option>-------</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __("site.Auth.Number_5") }}</label>
                                    <input type="text" name="id_number" class="form-control" placeholder="{{ __("site.Auth.Number_5") }}">
                                </div>
                            </div>


                            <div class="col-lg-6 col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __("messages.Mobile") }}</label>
                                    <input type="text"
                                        value="{{ auth()->user()->mobile_country_code . '' . auth()->user()->mobile }}"
                                        disabled class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __("messages_301.Country") }}</label>
                                    <input type="text" value="{{ auth()->user()->country->name }}" disabled
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __("messages_301.City") }}</label>
                                    <input type="text" value="{{ auth()->user()->city->name }}" disabled
                                        class="form-control">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group mb-45">
                                    <label class="form-label dark-color mb-3 fw-600">{{ __("messages.Address") }}</label>
                                    <input type="text" name="address" class="form-control" placeholder="{{ __("messages.Address") }}">
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- step footer actions -->
                    <div class="step-footer d-flex justify-content-between flex-wrap">
                        <button data-step-action="prev" class="main-btn outline">{{ __('site.Auth.Previous') }}</button>
                        <button data-step-action="next" class="main-btn">{{ __('site.Auth.Next') }}</button>
                        <button data-step-action="finish" class="main-btn">{{ __('site.Auth.Finish') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal -->
    @include('site-inc.register_modal')
@endsection


@section('script')
    @include('main-site.supplier.products.inc.script_submit')
    @include('main-site.supplier.company.inc.script_submit')
    @include('auth.complete_register.inc.sub_department_script')

    <script>
        // steps
        $(document).ready(function() {
            $('#demo').steps({
                onFinish: function() {
                    $('#submitModal').modal('show')
                }
            });

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