@extends('dashboard.layouts.app')

@section('title', __('dashboard.Add Pricing Option') . ' - ' . $track->name)
@section('page_heading', __('dashboard.Add Pricing Option') . ' - ' . $track->name)

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.tracks.index') }}"
            class="text-muted text-hover-primary">{{ __('dashboard.Tracks') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.tracks.show', $track) }}"
            class="text-muted text-hover-primary">{{ $track->name }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Add Pricing Option') }}</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{ __('dashboard.Add Pricing Option for') }}: {{ $track->name }}</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('dashboard.tracks.pricing.store', $track) }}" method="POST">
                @csrf

                <div class="mb-3">
                    <label for="levels_number" class="form-label">{{ __('dashboard.Levels Number') }}</label>
                    <input type="number" name="levels_number" id="levels_number"
                        class="form-control @error('levels_number') is-invalid @enderror"
                        value="{{ old('levels_number') }}" min="1" required>
                    @error('levels_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                @foreach ($trackTypes as $type)
                    <div class="card card-bordered mb-5">
                        <div class="card-header">
                            <h3 class="card-title">{{ $type->name }}</h3>
                        </div>
                        <div class="card-body">
                            @foreach ($pricingTypes as $pricingType)
                                @php
                                    $inputName = "pricings[{$type->id}][{$pricingType->id}]";
                                    $oldPrice = old($inputName . '.total_price');
                                    $oldExclude = old($inputName . '.exclude');
                                    $isExcluded = $oldExclude == '1';
                                @endphp
                                <div class="row mb-3 pricing-row" data-track-type="{{ $type->id }}"
                                    data-pricing-type="{{ $pricingType->id }}">
                                    <div class="col-md-4">
                                        <label class="form-label">{{ $pricingType->name }}</label>
                                        <input type="hidden" name="{{ $inputName }}[track_type_id]"
                                            value="{{ $type->id }}">
                                        <input type="hidden" name="{{ $inputName }}[pricing_type_id]"
                                            value="{{ $pricingType->id }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{{ __('dashboard.Price') }}</label>
                                        <input type="number" name="{{ $inputName }}[total_price]"
                                            class="form-control price-input @error($inputName . '.total_price') is-invalid @enderror"
                                            value="{{ $oldPrice }}" step="0.01" min="0"
                                            {{ $isExcluded ? 'disabled' : 'required' }}>
                                        @error($inputName . '.total_price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label
                                            class="form-check-label mb-2">{{ __('dashboard.Exclude') }}</label>
                                        <div class="form-check form-switch">
                                            <input type="checkbox" name="{{ $inputName }}[exclude]"
                                                class="form-check-input exclude-checkbox" value="1"
                                                {{ $isExcluded ? 'checked' : '' }}>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach

                <button type="submit" class="btn btn-primary">{{ __('dashboard.Save') }}</button>
                <a href="{{ route('dashboard.tracks.show', $track) }}"
                    class="btn btn-secondary">{{ __('dashboard.Back to Track') }}</a>
            </form>
        </div>
    </div>


@endsection
@section('scripts')
        <script>
            $(document).ready(function() {
                $('.exclude-checkbox').change(function() {
                    const row = $(this).closest('.pricing-row');
                    const priceInput = row.find('.price-input');

                    if ($(this).is(':checked')) {
                        priceInput.prop('disabled', true).prop('required', false);
                    } else {
                        priceInput.prop('disabled', false).prop('required', true);
                    }
                });

                // Prevent form submission if duplicate pricing options are selected
                $('form').submit(function(event) {
                    let pricingOptions = [];
                    let hasDuplicates = false;

                    $('.pricing-row:not(:has(.exclude-checkbox:checked))').each(function() {
                        let trackTypeId = $(this).data('track-type');
                        let pricingTypeId = $(this).data('pricing-type');
                        let levelsNumber = $('#levels_number').val();
                        let pricingOption = `${trackTypeId}-${pricingTypeId}-${levelsNumber}`;

                        if (pricingOptions.includes(pricingOption)) {
                            hasDuplicates = true;
                            return false; // Exit the loop early
                        }
                        pricingOptions.push(pricingOption);
                    });

                    if (hasDuplicates) {
                        alert("{{ __('dashboard.Duplicate pricing option') }}"); // Use a localized message
                        event.preventDefault(); // Prevent form submission
                    }
                });
            });
        </script>
    @endsection