@extends('dashboard.layouts.app')

@section('title', __('dashboard.Add Pricing Option') . ' - ' . $placementTest->name)
@section('page_heading', __('dashboard.Add Pricing Option') . ' - ' . $placementTest->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.placement-tests.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.Placement Tests') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.placement-tests.show', $placementTest) }}" class="text-muted text-hover-primary">{{ $placementTest->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') }}: {{ $placementTest->name }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('dashboard.placement-tests.pricing.store', $placementTest) }}" method="POST">
            @csrf

            <div class="mb-3">
                <label for="pricing_type_id" class="form-label">{{ __('dashboard.Pricing Type') }}</label>
                <select name="pricing_type_id" id="pricing_type_id" class="form-select @error('pricing_type_id') is-invalid @enderror" required>
                    <option value="">{{ __('dashboard.Select Pricing Type') }}</option>
                    @foreach($pricingTypes as $type)
                        <option value="{{ $type->id }}" {{ old('pricing_type_id') == $type->id ? 'selected' : '' }}>
                            {{ $type->name }}
                        </option>
                    @endforeach
                </select>
                @error('pricing_type_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

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

            <div class="mb-3">
                <label for="total_price" class="form-label">{{ __('dashboard.Total Price') }}</label>
                <input type="number" name="total_price" id="total_price" class="form-control @error('total_price') is-invalid @enderror" value="{{ old('total_price', 0) }}" step="0.01" min="0" required>
                @error('total_price')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3 form-check form-switch">
                <input type="checkbox" name="has_discount" id="has_discount" class="form-check-input" value="1" {{ old('has_discount') ? 'checked' : '' }}>
                <label for="has_discount" class="form-check-label">{{ __('dashboard.Has Discount') }}</label>
            </div>

            <div id="discount-fields" class="collapse {{ old('has_discount') ? 'show' : '' }}">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="discount_start_date" class="form-label">{{ __('dashboard.Discount Start Date') }}</label>
                        <input type="datetime-local" name="discount_start_date" id="discount_start_date" class="form-control @error('discount_start_date') is-invalid @enderror" value="{{ old('discount_start_date') }}">
                        @error('discount_start_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="discount_end_date" class="form-label">{{ __('dashboard.Discount End Date') }}</label>
                        <input type="datetime-local" name="discount_end_date" id="discount_end_date" class="form-control @error('discount_end_date') is-invalid @enderror" value="{{ old('discount_end_date') }}">
                        @error('discount_end_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                @foreach(config('app.supported_locales') as $locale)
                    <div class="mb-3">
                        <label for="discount_title_{{ $locale }}" class="form-label">{{ __('dashboard.Discount Title') }} ({{ strtoupper($locale) }})</label>
                        <input type="text" name="discount_title[{{ $locale }}]" id="discount_title_{{ $locale }}" class="form-control @error('discount_title.' . $locale) is-invalid @enderror" value="{{ old('discount_title.' . $locale) }}" placeholder="{{ $locale == 'ar' ? 'خصم لآلاف الناس' : 'Discount for Thousands' }}">
                        @error('discount_title.' . $locale)
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="discount_description_{{ $locale }}" class="form-label">{{ __('dashboard.Discount Description') }} ({{ strtoupper($locale) }})</label>
                        <textarea name="discount_description[{{ $locale }}]" id="discount_description_{{ $locale }}" class="form-control @error('discount_description.' . $locale) is-invalid @enderror" placeholder="{{ $locale == 'ar' ? 'خصم لتجربة تعليمية لتعلم ما معنى الفرض؟' : 'Discount for an educational experience to learn what an assumption means?' }}">{{ old('discount_description.' . $locale) }}</textarea>
                        @error('discount_description.' . $locale)
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                @endforeach

                <div class="mb-3">
                    <label for="discount_type" class="form-label">{{ __('dashboard.Discount Type') }}</label>
                    <select name="discount_type" id="discount_type" class="form-select @error('discount_type') is-invalid @enderror">
                        <option value="percentage" {{ old('discount_type', 'percentage') == 'percentage' ? 'selected' : '' }}>{{ __('dashboard.Percentage') }}</option>
                        <option value="fixed" {{ old('discount_type') == 'fixed' ? 'selected' : '' }}>{{ __('dashboard.Fixed') }}</option>
                    </select>
                    @error('discount_type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="discount_amount" class="form-label">{{ __('dashboard.Discount Amount') }}</label>
                    <input type="number" name="discount_amount" id="discount_amount" class="form-control @error('discount_amount') is-invalid @enderror" value="{{ old('discount_amount', 0) }}" step="0.01" min="0">
                    @error('discount_amount')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">{{ __('dashboard.Save') }}</button>
                <a href="{{ route('dashboard.placement-tests.show', $placementTest) }}" class="btn btn-secondary">{{ __('dashboard.Back to Placement Test') }}</a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('styles')
    <style>
        #discount-fields {
            transition: height 0.3s ease, opacity 0.3s ease;
        }
        .form-check-input:checked {
            background-color: #007bff;
            border-color: #007bff;
        }
        .form-check-label {
            cursor: pointer;
        }
        .collapse:not(.show) {
            display: none;
        }
    </style>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#pricing_type_id').select2({
                placeholder: "{{ __('dashboard.Select Pricing Type') }}",
                allowClear: true,
                width: '100%'
            });

            function toggleDiscountFields() {
                if ($('#has_discount').is(':checked')) {
                    $('#discount-fields').collapse('show');
                } else {
                    $('#discount-fields').collapse('hide');
                }
            }

            $('#has_discount').on('change', toggleDiscountFields);
            toggleDiscountFields();

            $('#pricing_type_id').on('select2:open', function() {
                document.querySelector('.select2-search__field').focus();
            });
        });
    </script>
@endsection