@extends('admin.layouts.index')

@section('content')
    <h4 class="card-title mb-3">
        <a href="{{ route('admin.captains.create') }}">
            <button class="btn btn-success">
                <i class="las la-plus-circle"></i> @lang('global.add')
            </button>
        </a>

        <a href="#" data-toggle="modal" data-target="#settingsModal">
            <button class="btn btn-dark">
                <i class="las la-cog"></i> @lang('global.settings')
            </button>
        </a>
    </h4>

    <div class="table-responsive">
        <table id="captainsTable" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>@lang('validation.attributes.avatar') </th>
                    <th>@lang('validation.attributes.username') </th>
                    <th>@lang('validation.attributes.name') </th>
                    <th>@lang('validation.attributes.email') </th>
                    <th>@lang('validation.attributes.phone') </th>
                    <th>@lang('validation.attributes.super_admin') </th>
                    <th>@lang('global.actions')</th>
                </tr>
            </thead>
        </table>
    </div>

    <x-bootstrap.modal id="settingsModal" content-type='slot' :title="__('global.settings')" width='xl'>
        <x-dashboard.form.form :action="route('admin.captains.settings')">

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

            <x-dashboard.form.input name="orders_serial_number" type='number' min='1' :value="cache('delivery_orders_serial_number')" />

            <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" :value="$working_times->{$day}->shifts[0]->opening_time" />
                <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" :value="$working_times->{$day}->shifts[0]->closing_time" />
                <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" :value="$working_times->{$day}->shifts[1]->opening_time" />
                <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" :value="$working_times->{$day}->shifts[1]->closing_time" />

                <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]" @if ($working_times->{$day}->open_24_hours) checked @endif 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]" @if ($working_times->{$day}->holiday) checked @endif 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
            <x-dashboard.form.button />
        </x-dashboard.form.form>
    </x-bootstrap.modal>
@endsection