@extends('layouts.app')
@section('title')
    {{ __('messages.Restaurants') }}
@endsection
@section('style')
    @include('admin.restaurants.inc.style')
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages.Restaurants') => route('admin.restaurants.index'),
                $user->name => null,
                __('messages.Restaurant info') => 'active',
            ],
        ])

        <div class="col-12 mb-4">
            <div class="bs-stepper wizard-numbered mt-2" id="stepper">
                <div class="bs-stepper-header">
                    <div class="step {{ request('step') == 'account-details' || !request('step') ? 'active' : '' }}"
                        data-target="#account-details">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-circle">1</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">{{ __('messages.Restaurant info') }}</span>
                            </span>
                        </button>
                    </div>
                    <div class="line">
                        <i class="ti ti-chevron-right"></i>
                    </div>

                    <div class="step {{ request('step') == 'social-links' ? 'active' : '' }}" data-target="#social-links">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-circle">2</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">{{ __('messages.Working hours') }}</span>
                            </span>
                        </button>
                    </div>
                    <div class="line">
                        <i class="ti ti-chevron-right"></i>
                    </div>
                    <div class="step {{ request('step') == 'personal-info' ? 'active' : '' }}" data-target="#personal-info">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-circle">3</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">{{ __('messages.Restaurant services') }}</span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="bs-stepper-content">
                    <!-- Account Details -->
                    <form class="card-body form_submit" id="form_submit"
                        action="{{ isset($restaurant_info) && $restaurant_info->id ? route('admin.restaurants.restaurant_info.update', $user) : route('admin.restaurants.restaurant_info.store', $user) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @if (isset($restaurant_info) && $restaurant_info->id)
                            @method('PUT')
                        @endif
                        <div id="account-details"
                            class="content {{ request('step') == 'account-details' || !request('step') ? 'active' : '' }}">
                            <div class="row g-3">

                                @include('admin.restaurants.inc.restaurant_info')
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary me-sm-3 me-1 btn_with_load">
                                        {{ __('messages.Save') }}
                                        <span class="spinner-border mx-3 d-none loader" role="status"
                                            aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- Working Hours -->
                    <form class="card-body form_submit" id="form_submit"
                        action="{{ isset($working_days) && $working_days->id ? route('admin.restaurants.working_hours.update', $user) : route('admin.restaurants.working_hours.store', $user) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @if (isset($working_days) && $working_days->id)
                            @method('PUT')
                        @endif
                        <div id="social-links" class="content {{ request('step') == 'social-links' ? 'active' : '' }}">
                            <div class="row g-3">
                                @include('admin.restaurants.inc.restaurant_working')
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary me-sm-3 me-1 btn_with_load">
                                        {{ __('messages.Save') }}
                                        <span class="spinner-border mx-3 d-none loader" role="status"
                                            aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- Restaurant Services -->
                    <form class="card-body form_submit" id="form_submit"
                        action="{{ isset($restaurant_services) && $restaurant_services->id ? route('admin.restaurants.restaurant_services.update', $user) : route('admin.restaurants.restaurant_services.store', $user) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @if (isset($restaurant_service) && $restaurant_service->id)
                            @method('PUT')
                        @endif
                        <div id="personal-info" class="content {{ request('step') == 'personal-info' ? 'active' : '' }}">
                            <div class="row g-3">
                                @include('admin.restaurants.inc.restaurant_service')
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary me-sm-3 me-1 btn_with_load">
                                        {{ __('messages.Save') }}
                                        <span class="spinner-border mx-3 d-none loader" role="status"
                                            aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    @include('inc.script_submit')

    @include('admin.restaurants.inc.script')

    <script>
        $(document).ready(function() {
            // Initialize the Stepper
            const stepperElement = document.getElementById('stepper');
            const stepper = new Stepper(stepperElement, {
                linear: false, // Allow non-linear navigation
                animation: true
            });

            // Get the step from the URL
            const urlParams = new URLSearchParams(window.location.search);
            const step = urlParams.get('step');

            // Map the step query parameter to the step index
            const stepMap = {
                'account-details': 0, // Step 1
                'social-links': 1, // Step 2
                'personal-info': 2 // Step 3
            };

            // If a step is specified in the URL, manually show the step
            if (step && stepMap[step] !== undefined) {
                // إلغاء تفعيل كل الخطوات
                $('.bs-stepper .step').removeClass('active');
                $('.bs-stepper .content').removeClass('active');

                // تفعيل الخطوة المطلوبة يدويًا
                const targetStep = stepMap[step];
                $(`.bs-stepper .step[data-target="#${step}"]`).addClass('active');
                $(`#${step}`).addClass('active');
            }
        });
    </script>
    {{-- <script src="{{ asset('assets/vendor/libs/jquery-repeater/jquery-repeater.js') }}"></script> --}}
@endsection