@extends('admin.layout.master')

@section('title', __('admin.working_days_for') . ' ' . $rental_company->name)

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5>{{ __('admin.working_days_for') }} {{ $rental_company->name }}</h5>
            <a href="{{ route('admin.rental-companies.index') }}" class="btn btn-secondary">
                <i class="ti ti-arrow-left"></i> {{ __('admin.back_to_rental_companies') }}
            </a>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.working-days.update', $rental_company) }}" method="POST">
                @csrf

                <div class="accordion" id="workingDaysAccordion">
                    @php $days = ['Saturday','Sunday','Monday','Tuesday','Wednesday','Thursday','Friday']; @endphp
                    @php $workingDays = $workingDays ?? collect(); @endphp

                    @foreach($days as $day)
                        @php $dayData = $workingDays[$day] ?? null; @endphp
                        <div class="accordion-item mb-2">
                            <h2 class="accordion-header" id="heading-{{ $day }}">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $day }}" aria-expanded="false" aria-controls="collapse-{{ $day }}">
                                    {{ __($day) }}
                                </button>
                            </h2>
                            <div id="collapse-{{ $day }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ $day }}" data-bs-parent="#workingDaysAccordion">
                                <div class="accordion-body">
                                    <div class="shifts-container" data-day="{{ $day }}">
                                        @if($dayData)
                                            @foreach($dayData->shifts as $index => $shift)
                                                <div class="row mb-2 shift-row">
                                                    <div class="col-md-5">
                                                        <label class="form-label">{{ __('admin.start_time') }}</label>
                                                        <input type="time" class="form-control" name="working_days[{{ $day }}][{{ $index }}][start]" value="{{ $shift->start_time }}">
                                                    </div>
                                                    <div class="col-md-5">
                                                        <label class="form-label">{{ __('admin.end_time') }}</label>
                                                        <input type="time" class="form-control" name="working_days[{{ $day }}][{{ $index }}][end]" value="{{ $shift->end_time }}">
                                                    </div>
                                                    <div class="col-md-2 d-grid">
                                                        <button type="button" class="btn btn-danger remove-shift"><i class="ti ti-minus"></i></button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <button type="button" class="btn btn-primary add-shift mt-2" data-day="{{ $day }}">
                                        <i class="ti ti-plus"></i> {{ __('admin.add_shift') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-3 d-flex justify-content-end">
                    <button type="submit" class="btn btn-success">
                        <i class="ti ti-save"></i> {{ __('admin.save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@section('scripts')
<script>
// Ensure code runs after DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Event delegation (works even for future elements)
    document.addEventListener('click', function(e) {
        // Add shift
        const addBtn = e.target.closest('.add-shift');
        if (addBtn) {
            const day = addBtn.dataset.day;
            const container = document.querySelector(`.shifts-container[data-day="${day}"]`);
            if (!container) return;

            const index = container.querySelectorAll('.shift-row').length;
            const rowHtml = `
                <div class="row mb-2 shift-row">
                    <div class="col-md-5">
                        <label class="form-label">{{ __('admin.start_time') }}</label>
                        <input type="time" class="form-control" name="working_days[${day}][${index}][start]">
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">{{ __('admin.end_time') }}</label>
                        <input type="time" class="form-control" name="working_days[${day}][${index}][end]">
                    </div>
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-danger remove-shift"><i class="ti ti-minus"></i></button>
                    </div>
                </div>`;

            container.insertAdjacentHTML('beforeend', rowHtml);
        }

        // Remove shift
        const removeBtn = e.target.closest('.remove-shift');
        if (removeBtn) {
            const row = removeBtn.closest('.shift-row');
            if (row) row.remove();
        }
    });
});
</script>
@endsection
@endsection