@extends('restaurant.layouts.index')

@section('content')

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link {{ current_tab('#general') }}" data-toggle="tab" href="#general">@lang('global.general_information')</a></li>
    <li class="nav-item"><a class="nav-link {{ current_tab('#services') }}" data-toggle="tab" href="#services"> {{ $restaurant->settings->portfolio->services_title->{$locale} }}</a></li>
    <li class="nav-item"><a class="nav-link {{ current_tab('#menu') }}" data-toggle="tab" href="#menu">{{ $restaurant->settings->portfolio->menu->title->{$locale} ?? __('global.menu') }}</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade {{ current_tab('#general') }}" id="general" role="tabpanel">
        <x-dashboard.form.form :action='route("restaurant.portfolio.general.update")' method="PATCH">
            <x-dashboard.form.select name="show_portfolio" :boolean="true" container-classes='col-12' :value="$restaurant->settings->portfolio->is_active" />
            <x-dashboard.form.input name="facebook" :required="false" :value="$restaurant->settings->portfolio->facebook" />
            <x-dashboard.form.input name="instagram" :required="false" :value="$restaurant->settings->portfolio->instagram" />
            <x-dashboard.form.input name="twitter" :required="false" :value="$restaurant->settings->portfolio->twitter" />
            <x-dashboard.form.input name="linkedin" :required="false" :value="$restaurant->settings->portfolio->linkedin" />
            <x-dashboard.form.input name="youtube" :required="false" :value="$restaurant->settings->portfolio->youtube" />
            <x-dashboard.form.input name="snapchat" :required="false" :value="$restaurant->settings->portfolio->snapchat" />
            <x-dashboard.form.input name="tiktok" :required="false" :value="$restaurant->settings->portfolio->tiktok" />
            <x-dashboard.form.input name="phone" :required="false" :value="$restaurant->settings->portfolio->phone" class="intl-tel-input" />
            <x-dashboard.form.input name="email" type='email' :required="false" :value="$restaurant->settings->portfolio->email" />
            <x-dashboard.form.textarea name="about[ar]" :title="__('validation.attributes.about') . ' ( ' . __('global.arabic') . ' )'" :required="false" :value="$restaurant->settings->portfolio->about->ar" />
            <x-dashboard.form.textarea name="about[en]" :title="__('validation.attributes.about') . ' ( ' . __('global.english') . ' )'" :required="false" :value="$restaurant->settings->portfolio->about->en" />
            <x-dashboard.form.button />
        </x-dashboard.form.form>
    </div>

    <div class="tab-pane fade {{ current_tab('#menu') }}" id="menu" role="tabpanel">
        <x-dashboard.form.form :action='route("restaurant.portfolio.menu.update")' method="PATCH">
            <x-dashboard.form.input name="menu_title[ar]" :title="__('validation.attributes.menu_title') . ' ( ' . __('global.arabic') . ' )'" :value="$restaurant->settings->portfolio->menu->title->ar ?? __('global.menu',locale:'ar')" />
            <x-dashboard.form.input name="menu_title[en]" :title="__('validation.attributes.menu_title') . ' ( ' . __('global.english') . ' )'" :value="$restaurant->settings->ortfolio?->menu->title->en ?? __('global.menu',locale:'en')" />
            <x-dashboard.form.file name="menu_image" :value="$restaurant->settings->portfolio->menu->image ?? url(mix('website/restaurant/portfolio/images/menu.png','assets'))" />
            <x-dashboard.form.select name="menu_is_active" :boolean="true" :value="$restaurant->settings->portfolio->menu->is_active ?? true" />
            <x-dashboard.form.button />
        </x-dashboard.form.form>
    </div>

    <div class="tab-pane fade {{ current_tab('#services') }}" id="services" role="tabpanel">
        <x-dashboard.form.form :action='route("restaurant.portfolio.services.update")' method="PATCH">
            <div id="services" class="col-12">
                <div class="row">
                    <x-dashboard.form.input name="services_title[ar]" :title="__('validation.attributes.services_title') . ' ( ' . __('global.arabic') . ' )'" :value="$restaurant->settings->portfolio->services_title->ar" />
                    <x-dashboard.form.input name="services_title[en]" :title="__('validation.attributes.services_title') . ' ( ' . __('global.english') . ' )'" :value="$restaurant->settings->portfolio->services_title->en" />
                </div>

                <h4 class="mt-3">
                    <button id="addRestaurantPortfolioServiceButton" data-services-max-index="{{ count($restaurant->settings->portfolio->services) }}" class="btn btn-success" type="button">
                        <i class="las la-plus-circle"></i> @lang('global.add')
                    </button>
                </h4>

                <div class="table-responsive mt-3">
                    <table class="table table-striped table-bordered dt">
                        <thead>
                            <tr>
                                <th>@lang('validation.attributes.title') (@lang('global.arabic')) <span class="text-danger">*</span> </th>
                                <th>@lang('validation.attributes.title') (@lang('global.english')) <span class="text-danger">*</span> </th>
                                <th>@lang("validation.attributes.link") <span class="text-danger">*</span></th>
                                <th class="w-400px">@lang("validation.attributes.image") <span class="text-danger">*</span></th>
                                <th>@lang("global.actions")</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($restaurant->settings->portfolio->services as $index => $service)
                            @include('restaurant.portfolio.helpers.service',['service' => $service,'service_index' => $index])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <x-dashboard.form.button container-classes='' input-width='' />
        </x-dashboard.form.form>
    </div>

</div>

@endsection