@extends('layouts.partials.master')

@section('title', 'Gerir horário')

@push('styles')
    <link href="{{asset('assets/css/forms.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/tables.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/section-marker.css')}}" rel="stylesheet" type="text/css">
@endpush

@section('content')
    <nav aria-label="breadcrumb">
        {!! $breadcrumbs !!}
    </nav>

    <div class="d-flex justify-content-between align-items-center my-4">
        @include('layouts.components.section-title', ['title' => 'Gerir horário'])
        <a href="{{ url('str-stores-workers', ['store' => $store->uuid]) }}" class="btn btn-sm btn-primary">Voltar <i class="fa-light fa-left-from-line"></i></a>
    </div>

    @include('layouts.components.alerts')

    <form id="save-schedule" action="{{ route('str_stores_schedule.update',  ['store' => $store->uuid]) }}" method="POST">
        @csrf
        @method('PUT')

        @php
            $intervalErrors = [];

            foreach ($errors->getMessages() as $key => $messages) {
                if (preg_match('/^intervals\.(\w+)\.\d+\.(from|to)$/', $key, $matches)) {
                    $day = $matches[1];
                    $intervalErrors[$day][] = implode(', ', $messages); // You could collect all messages here
                }
            }
        @endphp

        <div class="card py-4 px-4">
            <table class="table">
                @foreach(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] as $weekDay)
                    <tr class="day-container">
                        <td class="align-content-start py-3 fit">
                            <div class="form-check m-0">
                                <input type="checkbox" class="form-check-input" id="{{$weekDay}}" {{ isset($store->weekly_schedule[$weekDay]) && count($store->weekly_schedule[$weekDay]) > 0 ? 'checked' : '' }}>
                                <label class="form-check-label ms-3" for={{$weekDay}}>
                                    {{ __('translations.weekdays.' . $weekDay) }}
                                </label>
                            </div>

                            @if(!empty($intervalErrors[$weekDay]))
                                <div class="error handle-error">
                                    @foreach(array_unique($intervalErrors[$weekDay]) as $error)
                                        <div>{{ $error }}</div>
                                    @endforeach
                                </div>
                            @endif
                        </td>
                        <td class="py-3">
                            <div class="intervals flex-grow-1 ps-4" style="max-width: 400px">
                                @if (isset($store->weekly_schedule[$weekDay]))
                                    @foreach($store->weekly_schedule[$weekDay] as $key => $interval)
                                        <div class="d-flex interval pb-3">
                                            <div class="flex-grow-1">
                                                <div class="form-group">
                                                    <input type="time" class="form-control" name="intervals[{{ $weekDay }}][{{ $key }}][from]" value="{{ $interval[0] }}" required>
                                                </div>
                                            </div>
                                            <div class="align-content-center text-muted px-2">
                                                <small>até</small>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="form-group">
                                                    <input type="time" class="form-control" name="intervals[{{ $weekDay }}][{{ $key }}][to]" value="{{ $interval[1] }}" required>
                                                </div>
                                            </div>
                                            <div class="align-content-center px-3">
                                                <button type="button" data-tooltip="tooltip" title="Excluír" class="delete-interval">
                                                    <i class="fa-light fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                    @if(count($store->weekly_schedule[$weekDay]) > 0)
                                        <button type="button" class="add-interval btn btn-link">
                                            <i class="fa-light fa-plus"></i> adicionar intervalo
                                        </button>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforeach
            </table>
        </div>

        <div class="row my-4">
            <div class="col-12 text-end">
                <button type="submit" class="btn btn-sm btn-primary">Gravar <i class="fa-light fa-floppy-disk"></i></button>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
    @vite('resources/js/str_stores_schedule/form.js')
@endpush