@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.css" rel="stylesheet">

    <style>
        .ts-wrapper .ts-control {
            border: none;
            border-radius: 0;
            padding: 0px;
        }
    </style>
@endpush

<form
    action="{{ route('app.projects.weeklies.weekly-progresses.update', [$project->id, $weekly->id, $weeklyProgress->id]) }}"
    method="POST">
    @csrf
    @method('patch')

    <x-ui.card>
        <div>
            <div class="relative flex items-center">
                <span class="flex-shrink mr-4 text-gray-800 text-sm font-bold">Weekly Progress</span>
                <div class="flex-grow border-t border-gray-300"></div>
            </div>
        </div>

        <div class="flex flex-col gap-4 py-6" x-data="calculateEndDate()">
            <div>
                <x-ui.input-label for="service_id" :value="__('Service Name')" class="mb-2" required />
                <x-ui.select-input id="service_id" name="service_id">
                    <x-ui.select-input-item value="" selected>Choose service</x-ui.select-input-item>
                    @foreach ($serviceCategories as $serviceCategory)
                        <optgroup label="{{ $serviceCategory->name }}" data-class="custom-optgroup">
                            @foreach ($serviceCategory->services as $service)
                                <x-ui.select-input-item value="{{ $service->id }}" :selected="old('service_id', $weeklyProgress->service_id) == $service->id">
                                    {{ $service->name }}
                                </x-ui.select-input-item>
                            @endforeach
                        </optgroup>
                    @endforeach
                </x-ui.select-input>
                <x-ui.input-error :messages="$errors->get('service_id')" class="mt-2" />
            </div>

            <div>
                <x-ui.input-label for="work_duration_in_days" :value="__('Work Duration in Days')" class="mb-2" required />
                <x-ui.text-input type="number" id="work_duration_in_days" name="work_duration_in_days"
                    x-model="work_duration_in_days" min="0" />
                <x-ui.input-error :messages="$errors->get('work_duration_in_days')" class="mt-2" />
            </div>

            <div>
                <x-ui.input-label for="start_date" :value="__('Start Date')" class="mb-2" required />
                <x-ui.text-input type="date" id="start_date" name="start_date" x-model="start_date" />
                <x-ui.input-error :messages="$errors->get('start_date')" class="mt-2" />
            </div>

            <div>
                <x-ui.input-label for="end_date" :value="__('End Date (Work Duration + Start Date)')" class="mb-2" />
                <x-ui.text-input type="date" id="end_date" x-model="end_date" readonly />
            </div>

            <div>
                <x-ui.input-label for="quantity" :value="__('Quantity')" class="mb-2" required />
                <x-ui.text-input type="number" id="quantity" name="quantity" :value="old('quantity', $weeklyProgress->quantity)" min="0"
                    step=".01" />
                <x-ui.input-error :messages="$errors->get('quantity')" class="mt-2" />
            </div>
        </div>
    </x-ui.card>

    <div class="flex justify-end mt-5">
        <x-ui.primary-button type="submit">
            <i class="fa-solid fa-save"></i>
            <span class="ms-2">Save</span>
        </x-ui.primary-button>
    </div>
</form>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/js/tom-select.complete.min.js"></script>

    <script>
        new TomSelect('#service_id', {
            sortField: 'text',
            render: {
                optgroup_header: function(data, escape) {
                    return '<div class="optgroup-header font-bold">' + escape(data
                            .label) +
                        '</div>';
                }
            }
        });
    </script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('calculateEndDate', () => ({
                start_date: @json(old('start_date', $weeklyProgress->start_date)),
                work_duration_in_days: @json(old('work_duration_in_days', $weeklyProgress->work_duration_in_days)),

                init() {
                    this.calculate();
                    this.$watch('start_date', () => this.calculate());
                    this.$watch('work_duration_in_days', () => this.calculate());
                },

                calculate() {
                    if (this.start_date && this.work_duration_in_days > 0) {
                        let start = new Date(this.start_date);
                        start.setDate(start.getDate() + parseInt(this.work_duration_in_days) -
                            1);
                        this.end_date = start.toISOString().split('T')[0];
                    } else {
                        this.end_date = '';
                    }
                }
            }));
        });
    </script>
@endpush