@extends('restaurant.layouts.index', ['without_card' => true])

@section('content')

    @if ($can_add)
        <x-dashboard.form.form :action="route('restaurant.branches.store')" method="POST">
            <div class="col-12">
                <h4 class="mb-3">@lang('global.general_information')</h4>
            </div>

            <x-dashboard.form.input name="title[ar]" :title="__('validation.attributes.title') . ' ( ' . __('global.arabic') . ' )'" />
            <x-dashboard.form.input name="title[en]" :title="__('validation.attributes.title') . ' ( ' . __('global.english') . ' )'" />
            <x-dashboard.form.select name="menu" id="ajaxSelectMenusInRestaurant" />
            <x-dashboard.form.input name="code" :required="false" />
            <x-dashboard.form.input name="email" type='email' :required="false" />
            <x-dashboard.form.input name="phone" :required="false" class="intl-tel-input" />
            <x-dashboard.form.file name="logo" :required="false" />

            @if ($latest_package?->code !== 'silver')
                <div class="col-12">
                    <h4 class="mt-3">@lang('global.general_settings')</h4>
                </div>

                <x-dashboard.form.select name="show_portfolio" :boolean="true" />
                <x-dashboard.form.input name="orders_serial_number" type='number' min='1' />
                <x-dashboard.form.select name="is_interactive_menu" :boolean="true" />
                <x-dashboard.form.select name="allowed_order_types" :multiple="true" :data-array="['takeaway', 'inside', 'delivery']" :name-fn='fn($order_type) => __("global.orders_type.$order_type")' :ajax="false" />
                <x-dashboard.form.select name="show_order_types_input" :boolean="true" />
                <x-dashboard.form.select name="default_order_type" :data-array="['takeaway', 'inside', 'delivery']" :name-fn='fn($order_type) => __("global.orders_type.$order_type")' :ajax="false" />
                <x-dashboard.form.select name="allowed_payment_methods" :help="__('messages.tooltips.branches.e_payment_fees')" :multiple="true" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' :ajax="false" />
                <x-dashboard.form.select name="show_payment_methods_input" :boolean="true" />
                <x-dashboard.form.select name="default_payment_method" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' :ajax="false" />
                <x-dashboard.form.select name="show_user_name_input" :boolean="true" />
                <x-dashboard.form.select name="show_user_email_input" :boolean="true" />
                <x-dashboard.form.select name="show_user_phone_input" :boolean="true" />
                <x-dashboard.form.select name="show_table_input" :boolean="true" />
                <x-dashboard.form.select name="show_address_input" :boolean="true" />
                @if (restaurant_admin()->restaurant->activity == 'hotel')
                    <x-dashboard.form.select name="show_persons_input" :boolean="true" />
                @endif
                <x-dashboard.form.select name="show_rating" :boolean="true" />
                <x-dashboard.form.select name="enable_order_cancellation_on_status" :data-array="['pending']" :name-fn='fn($order_status) => __("global.$order_status")' :multiple="true" :required="false" :ajax="false" />
                <x-dashboard.form.select name="enable_adding_meal_to_order_on_status" :data-array="['pending']" :name-fn='fn($order_status) => __("global.$order_status")' :multiple="true" :required="false" :ajax="false" />
                <x-dashboard.form.select name="enable_call_waiter" :boolean="true" />
                <x-dashboard.form.select name="send_otp" :boolean="true" />
                <x-dashboard.form.textarea name="alert_message[ar]" :required="false" :title="__('validation.attributes.alert_message') . ' ( ' . __('global.arabic') . ' )'" />
                <x-dashboard.form.textarea name="alert_message[en]" :required="false" :title="__('validation.attributes.alert_message') . ' ( ' . __('global.english') . ' )'" />
            @endif

            <div id="tips" class="col-12">
                <h4 class="mt-3">
                    @lang('global.tips')
                    <button id="addBranchSettingsTipsButton" data-tips-max-index="0" class="btn btn-success tooltips" title="@lang('global.add')" type="button">
                        <i class="las la-plus-circle"></i>
                    </button>
                </h4>

                <div class="row">
                    <x-dashboard.form.select name="show_tips" :boolean="true" />
                    <x-dashboard.form.select name="show_other_amount_tips_input" :boolean="true" />
                </div>

                <div class="table-responsive mt-3">
                    <table class="table table-striped table-bordered dt">
                        <thead>
                            <tr>
                                <th>@lang('validation.attributes.amount')</th>
                                <th>@lang('global.options')</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="col-12">
                <h4 class="my-3">@lang('global.working_times')</h4>
            </div>

            @foreach ($days as $day)
                <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][0][opening_time]" type='time' :title="__('validation.attributes.opening_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" />
                <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][0][closing_time]" type='time' :title="__('validation.attributes.closing_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" />
                <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][1][opening_time]" type='time' :title="__('validation.attributes.opening_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" />
                <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][1][closing_time]" type='time' :title="__('validation.attributes.closing_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" />

                <div class="col-12 d-flex justify-content-center gap-2">
                    <label class="checkbox checkbox-success offset-1 mb-0 mt-3">
                        <input type="checkbox" data-day="{{ $day }}" name="working_times[{{ $day }}][open_24_hours]" class='open-24-hours-input'>
                        <span>@lang('validation.attributes.open_24_hours')</span>
                        <span class="checkmark"></span>
                    </label>

                    <label class="checkbox checkbox-success mb-0 mt-3">
                        <input type="checkbox" data-day="{{ $day }}" name="working_times[{{ $day }}][holiday]" class='holiday-input'>
                        <span>@lang('validation.attributes.holiday')</span>
                        <span class="checkmark"></span>
                    </label>
                </div>

                <div class="col-12">
                    <hr class="my-4">
                </div>
            @endforeach

            <div class="col-12">
                <h4 class="my-3">@lang('global.location')</h4>
            </div>

            <x-dashboard.form.select name="country" id="ajaxSelectCountries" />
            <x-dashboard.form.select name="city" id="ajaxSelectCitiesInCountry" />
            <x-dashboard.form.input class="ltr" name="latitude" readonly :requried="false" :hidden="true" :tooltip="__('messages.tooltips.click_on_map_to_fill')" />
            <x-dashboard.form.input class="ltr" name="longitude" readonly :requried="false" :hidden="true" :tooltip="__('messages.tooltips.click_on_map_to_fill')" />

            <div class="col-12">
                <div class="form-group">
                    <div class="col-12">
                        <div id="map" style="height: 400px;"></div>
                    </div>
                </div>
            </div>

            <x-dashboard.form.button />
        </x-dashboard.form.form>
    @else
        <x-bootstrap.alert type="info" :messages="__('messages.info.branches.must_add_menus')" />
    @endif
@endsection