@extends('backend.app')

@section('title', 'Edit Hours')

@push('style')
@endpush

@section('content')
    {{-- PAGE-HEADER --}}
    <div class="page-header">
        <div>
            <h1 class="page-title">Edit Hours</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Hours</li>
            </ol>
        </div>
    </div>
    {{-- PAGE-HEADER --}}

    <div class="row">
        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12">
            <div class="card box-shadow-0">
                <div class="card-body">
                    <form action="{{ route('hours.update', ['id' => $hours->id]) }}" method="POST">
                        @csrf
                        @method('PUT')

                        @php
                            $days = old('day', $hours->day ?? ['']);
                            $times = old('time', $hours->time ?? ['']);
                            $textColors = old('text_color', $hours->text_color ?? ['']);

                            $count = max(count($days ?? []), count($times ?? []), count($textColors ?? []), 1);
                        @endphp

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">Hours</label>
                                <button type="button" class="btn btn-sm btn-primary" id="add-hours-row">Add More</button>
                            </div>

                            <div id="hours-rows">
                                @for ($i = 0; $i < $count; $i++)
                                    <div class="row g-2 align-items-end hours-row mb-2">
                                        <div class="col-md-3">
                                            <label class="form-label">Day</label>
                                            <input type="text" name="day[]" class="form-control" value="{{ $days[$i] ?? '' }}" placeholder="e.g. Sunday" />
                                            @error('day.' . $i)
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Time</label>
                                            <input type="text" name="time[]" class="form-control" value="{{ $times[$i] ?? '' }}" placeholder="e.g. 09:00 - 18:00" />
                                            @error('time.' . $i)
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Text Color</label>
                                            <input type="color" name="text_color[]" class="form-control form-control-color w-100" value="{{ $textColors[$i] ?? '#000000' }}" title="Choose your color">
                                            @error('text_color.' . $i)
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-2 text-end">
                                            <button type="button" class="btn btn-sm btn-danger remove-hours-row" {{ $i === 0 ? 'disabled' : '' }}>Remove</button>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">Update</button>
                        <a href="{{ route('hours.index') }}" class="btn btn-secondary">Back</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            function makeRow(dayValue = '', timeValue = '', colorValue = '') {
                return `
                <div class="row g-2 align-items-end hours-row mb-2">
                    <div class="col-md-3">
                        <label class="form-label">Day</label>
                        <input type="text" name="day[]" class="form-control" value="${dayValue}" placeholder="e.g. Sunday" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Time</label>
                        <input type="text" name="time[]" class="form-control" value="${timeValue}" placeholder="e.g. 09:00 - 18:00" />
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Text Color</label>
                        <input type="color" name="text_color[]" class="form-control form-control-color w-100" value="${colorValue}" title="Choose your color" />
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="button" class="btn btn-sm btn-danger remove-hours-row">Remove</button>
                    </div>
                </div>`;
            }

            $('#add-hours-row').on('click', function() {
                $('#hours-rows').append(makeRow());
                $('#hours-rows .remove-hours-row').prop('disabled', false);
                $('#hours-rows .hours-row:first .remove-hours-row').prop('disabled', true);
            });

            $(document).on('click', '.remove-hours-row', function() {
                $(this).closest('.hours-row').remove();
                if ($('#hours-rows .hours-row').length === 1) {
                    $('#hours-rows .remove-hours-row').prop('disabled', true);
                } else {
                    $('#hours-rows .remove-hours-row').prop('disabled', false);
                    $('#hours-rows .hours-row:first .remove-hours-row').prop('disabled', true);
                }
            });

            if ($('#hours-rows .hours-row').length === 1) {
                $('#hours-rows .remove-hours-row').prop('disabled', true);
            }
        });
    </script>
@endpush