@extends('mall.layouts.index')

@section('content')
<x-dashboard.form.form :action='route("mall.branches.store")'>
    <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.input name="color" type='color' :value="mall_admin()->mall->color" />
    <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" :value="mall_admin()->mall->uploads('logo')" />

    <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 name="latitude" readonly :required="false" :hidden="true" data-required="1" />
    <x-dashboard.form.input name="longitude" readonly :required="false" :hidden="true" data-required="1" />

    <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>
@endsection