@extends('dashboard.layouts.app')

@section('title', __('dashboard.Add Pricing Option'))
@section('page_heading', __('dashboard.Add Pricing Option'))

@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.items.index') }}"
            class="text-muted text-hover-primary">{{ __('dashboard.Items') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.items.show', $item) }}"
            class="text-muted text-hover-primary">{{ $item->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') }}: {{ $item->name }}</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('dashboard.items.pricing.store', $item) }}" method="POST">
                @csrf

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="card card-bordered mb-5">
                    <div class="card-body">
                        @foreach ($pricingTypes as $pricingType)
                            @php
                                $inputName = "pricings[{$pricingType->id}]";
                                $oldPrice = old($inputName . '.price');
                                $oldExclude = old($inputName . '.exclude');
                                $isExcluded = $oldExclude == '1';
                            @endphp
                            <div class="row mb-3 pricing-row" data-pricing-type="{{ $pricingType->id }}">
                                <div class="col-md-4">
                                    <label class="form-label">{{ $pricingType->name }}</label>
                                    <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 }}[price]"
                                           class="form-control price-input @error($inputName . '.price') is-invalid @enderror"
                                           value="{{ $oldPrice }}" step="0.01" min="0"
                                           {{ $isExcluded ? 'disabled' : '' }}>
                                    @error($inputName . '.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="hidden" name="{{ $inputName }}[exclude]" value="0">
                                        <input type="checkbox" name="{{ $inputName }}[exclude]"
                                               class="form-check-input exclude-checkbox" value="1"
                                               {{ $isExcluded ? 'checked' : '' }}>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">{{ __('dashboard.Save') }}</button>
                <a href="{{ route('dashboard.items.pricing.index', $item) }}"
                   class="btn btn-secondary">{{ __('dashboard.Back') }}</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);
                }
            });

            $('form').submit(function(event) {
                let pricingOptions = [];
                let hasDuplicates = false;

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

                    if (pricingOptions.includes(pricingOption)) {
                        hasDuplicates = true;
                        return false;
                    }
                    pricingOptions.push(pricingOption);
                });

                if (hasDuplicates) {
                    alert("{{ __('dashboard.Duplicate pricing option') }}");
                    event.preventDefault();
                }
            });
        });
    </script>
@endsection