@extends('site.layouts.app')
@section('style')
    <style>
        .my-custom-filepond.filepond--root {
            height: 100px;
        }

        .filepond--root .filepond--drop-label {
            min-height: 5.75em;
        }
    </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>
                    <li data-step-target="step2">
                        <span class="circle"></span>
                        <span class="step-num dark-color opacity-60 sm-text">{{ __('site.Auth.Second') }}</span>
                        <h4 class="fw-600 dark-color opacity-60 my-1">{{ __('site.Auth.Complete_3') }}</h4>
                        <span class="state opacity-60 sm-text">{{ __('site.Auth.Waiting') }}</span>
                    </li>
                    <li data-step-target="step3">
                        <span class="circle"></span>
                        <span class="step-num dark-color opacity-60 sm-text">{{ __('site.Auth.Third') }}</span>
                        <h4 class="fw-600 dark-color opacity-60 my-1">{{ __('site.Auth.Complete_4') }}</h4>
                        <span class="state opacity-60 sm-text">{{ __('site.Auth.Waiting') }}</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
                    <div class="step-tab-panel" data-step="step1">
                        <h3 class="dark-color fw-600 text-center mb-2">{{ __('site.Auth.Complete_2') }}</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>
                            
                            @include('site-inc.step_1')
                        </div>
                    </div>

                    <!-- step 2 -->
                    <div class="step-tab-panel" data-step="step2">
                        <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">{{ __('site.Auth.Number_1') }}</label>
                                    <input type="text " name="commercial_number" class="form-control"
                                        placeholder="{{ __('site.Auth.Number_1') }}">
                                </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_2') }}</label>
                                    <input type="text" name="tax_number" class="form-control"
                                        placeholder="{{ __('site.Auth.Number_2') }}">
                                </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_3') }}</label>
                                    <input type="text" name="zakat_number" class="form-control"
                                        placeholder="{{ __('site.Auth.Number_3') }}">
                                </div>
                            </div>

                            @include('site-inc.site_link')
                        </div>
                    </div>

                    <!-- step 3 -->
                    <div class="step-tab-panel" data-step="step3">
                        <h3 class="dark-color fw-600 text-center mb-2">{{ __('site.Auth.Complete_4') }}</h3>
                        <p class="dark-color opacity-70 text-center mb-5">{{ __('site.Auth.Complete_5') }}</p>
                        @include('site-inc.banner_logo')

                    </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')
    @php
        $pond_logo = true;
        $pond_banner = true;
    @endphp

    @include('main-site.supplier.company.inc.script_submit')
    @include('main-site.supplier.products.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