@extends('backend.app')

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

@push('style')
@endpush

@section('content')
    {{-- PAGE-HEADER --}}
    <div class="page-header">
        <div>
            <h1 class="page-title">Create Hours</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <div class="d-flex justify-content-end mb-2">
                <a href="{{ route('hours.index') }}" class="btn btn-primary">Hours list</a>
            </div>
        </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.store') }}" method="POST">
                        @csrf


                        @method('POST')

                        @php
                            $days = old('day', ['']);
                            $times = old('time', ['']);
                            $color = old('color', ['']);
                            $count = max(count($days ?? []), count($times ?? []), count($color ?? []), 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="{{ $color[$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">Submit</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 = '#000000') {
                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