@extends('dashboard.layouts.app')

@section('title', __('dashboard.Create Discount'))
@section('page_heading', __('dashboard.Create Discount'))

@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.general-discounts.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.General Discounts') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Create Discount') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('dashboard.Create Discount') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('dashboard.general-discounts.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h5 class="mb-3">{{ __('dashboard.Discount Details') }}</h5>
                                <hr>
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">{{ __('dashboard.Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                                       placeholder="{{ __('dashboard.Enter discount name') }}" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <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' ? '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_value" class="form-label">{{ __('dashboard.Discount Value') }}</label>
                                <input type="number" name="discount_value" id="discount_value" class="form-control @error('discount_value') is-invalid @enderror"
                                       placeholder="{{ __('dashboard.Enter discount value') }}" value="{{ old('discount_value') }}" required>
                                @error('discount_value')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h5 class="mb-3">{{ __('dashboard.Usage Limits') }}</h5>
                                <hr>
                            </div>
                            <div class="mb-3">
                                <label for="max_uses" class="form-label">{{ __('dashboard.Max Uses') }}</label>
                                <input type="number" name="max_uses" id="max_uses" class="form-control @error('max_uses') is-invalid @enderror"
                                       placeholder="{{ __('dashboard.Enter max uses') }}" value="{{ old('max_uses') }}">
                                @error('max_uses')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h5 class="mb-3">{{ __('dashboard.Validity') }}</h5>
                                <hr>
                            </div>
                            <div class="mb-3">
                                <label for="start_date" class="form-label">{{ __('dashboard.Start Date') }}</label>
                                <input type="datetime-local" name="start_date" id="start_date" class="form-control @error('start_date') is-invalid @enderror"
                                       value="{{ old('start_date') }}" required>
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="end_date" class="form-label">{{ __('dashboard.End Date') }}</label>
                                <input type="datetime-local" name="end_date" id="end_date" class="form-control @error('end_date') is-invalid @enderror"
                                       value="{{ old('end_date') }}" required>
                                @error('end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h5 class="mb-3">{{ __('dashboard.Applicability') }}</h5>
                                <hr>
                            </div>
                            <div class="mb-3">
                                <label for="applicability" class="form-label">{{ __('dashboard.Applicability') }}</label>
                                <select name="applicability" id="applicability" class="form-select @error('applicability') is-invalid @enderror">
                                    <option value="all" {{ old('applicability') == 'all' ? 'selected' : '' }}>{{ __('dashboard.All') }}</option>
                                    <option value="specific" {{ old('applicability') == 'specific' ? 'selected' : '' }}>{{ __('dashboard.Specific') }}</option>
                                </select>
                                @error('applicability')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="is_active" class="form-label">{{ __('dashboard.Is Active') }}</label>
                                <select name="is_active" id="is_active" class="form-select @error('is_active') is-invalid @enderror">
                                    <option value="1" {{ old('is_active', 1) == '1' ? 'selected' : '' }}>{{ __('dashboard.Yes') }}</option>
                                    <option value="0" {{ old('is_active', 0) == '0' ? 'selected' : '' }}>{{ __('dashboard.No') }}</option>
                                </select>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="first_order_only" class="form-label">{{ __('dashboard.First Order Only') }}</label>
                                <select name="first_order_only" id="first_order_only" class="form-select @error('first_order_only') is-invalid @enderror">
                                    <option value="1" {{ old('first_order_only') == '1' ? 'selected' : '' }}>{{ __('dashboard.Yes') }}</option>
                                    <option value="0" {{ old('first_order_only', 0) == '0' ? 'selected' : '' }}>{{ __('dashboard.No') }}</option>
                                </select>
                                @error('first_order_only')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="specific-fields d-none">
                <div class="mb-4">
                    <h5 class="mb-3">{{ __('dashboard.Specific Filters') }}</h5>
                    <hr>
                </div>

                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">{{ __('dashboard.Applies To') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="applies_to[]" id="apply_to_tracks" value="tracks" {{ in_array('tracks', old('applies_to', [])) ? 'checked' : '' }}>
                            <label class="form-check-label" for="apply_to_tracks">{{ __('dashboard.Tracks') }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="applies_to[]" id="apply_to_items" value="items" {{ in_array('items', old('applies_to', [])) ? 'checked' : '' }}>
                            <label class="form-check-label" for="apply_to_items">{{ __('dashboard.Items') }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="applies_to[]" id="apply_to_custom_items" value="custom_items" {{ in_array('custom_items', old('applies_to', [])) ? 'checked' : '' }}>
                            <label class="form-check-label" for="apply_to_custom_items">{{ __('dashboard.Custom Items') }}</label>
                        </div>
                    </div>
                </div>

                <div id="track_filters_container" style="display: none;">
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">{{ __('dashboard.Track Filters') }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="track_filters[]" value="all_tracks" id="all_tracks" {{ in_array('all_tracks', old('track_filters', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="all_tracks">{{ __('dashboard.All Tracks') }}</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="track_filters[]" value="specific_categories" id="specific_track_categories" {{ in_array('specific_categories', old('track_filters', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="specific_track_categories">{{ __('dashboard.Specific Track Categories') }}</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="track_filters[]" value="specific_tracks" id="specific_tracks" {{ in_array('specific_tracks', old('track_filters', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="specific_tracks">{{ __('dashboard.Specific Tracks') }}</label>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div id="track_categories_container" style="display: none;">
                                        <label for="track_category_ids" class="form-label fw-bold">{{ __('dashboard.Track Categories') }}</label>
                                        <select name="track_category_ids[]" id="track_category_ids" multiple class="form-select select2-enhanced @error('track_category_ids') is-invalid @enderror">
                                            @foreach($trackCategories as $category)
                                                <option value="{{ $category->id }}" {{ in_array($category->id, old('track_category_ids', [])) ? 'selected' : '' }}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('track_category_ids')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div id="tracks_container" style="display: none;" class="mt-3">
                                        <label for="track_ids" class="form-label fw-bold">{{ __('dashboard.Tracks') }}</label>
                                        <select name="track_ids[]" id="track_ids" multiple class="form-select select2-enhanced @error('track_ids') is-invalid @enderror">
                                            @foreach($tracks as $track)
                                                <option value="{{ $track->id }}" {{ in_array($track->id, old('track_ids', [])) ? 'selected' : '' }}>{{ $track->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('track_ids')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="item_filters_container" style="display: none;">
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">{{ __('dashboard.Item Filters') }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="item_filters[]" value="all_items" id="all_items" {{ in_array('all_items', old('item_filters', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="all_items">{{ __('dashboard.All Items') }}</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="item_filters[]" value="specific_categories" id="specific_item_categories" {{ in_array('specific_categories', old('item_filters', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="specific_item_categories">{{ __('dashboard.Specific Item Categories') }}</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="item_filters[]" value="specific_items" id="specific_items" {{ in_array('specific_items', old('item_filters', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="specific_items">{{ __('dashboard.Specific Items') }}</label>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div id="item_categories_container" style="display: none;">
                                        <label for="item_category_ids" class="form-label fw-bold">{{ __('dashboard.Item Categories') }}</label>
                                        <select name="item_category_ids[]" id="item_category_ids" multiple class="form-select select2-enhanced @error('item_category_ids') is-invalid @enderror">
                                            @foreach($itemCategories as $category)
                                                <option value="{{ $category->id }}" {{ in_array($category->id, old('item_category_ids', [])) ? 'selected' : '' }}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('item_category_ids')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div id="items_container" style="display: none;" class="mt-3">
                                        <label for="item_ids" class="form-label fw-bold">{{ __('dashboard.Items') }}</label>
                                        <select name="item_ids[]" id="item_ids" multiple class="form-select select2-enhanced @error('item_ids') is-invalid @enderror">
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}" {{ in_array($item->id, old('item_ids', [])) ? 'selected' : '' }}>{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('item_ids')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">{{ __('dashboard.Create') }}</button>
        </form>
    </div>
</div>
@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>
<style>
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        min-height: 38px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 0.2rem;
        padding: 2px 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: white;
        margin-right: 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 2px 5px;
    }
</style>
<script>
$(function() {
    function toggleSpecificFields() {
        $('.specific-fields').toggleClass('d-none', $('#applicability').val() !== 'specific');
        if ($('#applicability').val() !== 'specific') resetSpecificFields();
    }

    function resetSpecificFields() {
        $('input[name="applies_to[]"]').prop('checked', false);
        $('input[name="track_filters[]"]').prop('checked', false);
        $('input[name="item_filters[]"]').prop('checked', false);
        $('#track_category_ids').val(null).trigger('change');
        $('#track_ids').val(null).trigger('change');
        $('#item_category_ids').val(null).trigger('change');
        $('#item_ids').val(null).trigger('change');
    }

    function toggleSelectionFields() {
        $('#track_filters_container').toggle($('#apply_to_tracks').is(':checked'));
        $('#track_categories_container').toggle($('#apply_to_tracks').is(':checked') && $('#specific_track_categories').is(':checked'));
        $('#tracks_container').toggle($('#apply_to_tracks').is(':checked') && $('#specific_tracks').is(':checked'));
        $('#item_filters_container').toggle($('#apply_to_items').is(':checked'));
        $('#item_categories_container').toggle($('#apply_to_items').is(':checked') && $('#specific_item_categories').is(':checked'));
        $('#items_container').toggle($('#apply_to_items').is(':checked') && $('#specific_items').is(':checked'));

        if (!$('#apply_to_tracks').is(':checked')) {
            $('input[name="track_filters[]"]').prop('checked', false);
            $('#track_category_ids').val(null).trigger('change');
            $('#track_ids').val(null).trigger('change');
        }
        if (!$('#apply_to_items').is(':checked')) {
            $('input[name="item_filters[]"]').prop('checked', false);
            $('#item_category_ids').val(null).trigger('change');
            $('#item_ids').val(null).trigger('change');
        }

        if ($('#all_tracks').is(':checked')) {
            $('#specific_track_categories').prop('disabled', true).prop('checked', false);
            $('#specific_tracks').prop('disabled', true).prop('checked', false);
            $('#track_category_ids').val(null).trigger('change');
            $('#track_ids').val(null).trigger('change');
        } else {
            $('#specific_track_categories').prop('disabled', false);
            $('#specific_tracks').prop('disabled', false);
        }

        if ($('#all_items').is(':checked')) {
            $('#specific_item_categories').prop('disabled', true).prop('checked', false);
            $('#specific_items').prop('disabled', true).prop('checked', false);
            $('#item_category_ids').val(null).trigger('change');
            $('#item_ids').val(null).trigger('change');
        } else {
            $('#specific_item_categories').prop('disabled', false);
            $('#specific_items').prop('disabled', false);
        }
    }

    $('#applicability').change(toggleSpecificFields);
    toggleSpecificFields();

    $('input[name="applies_to[]"]').change(toggleSelectionFields);
    $('input[name="track_filters[]"]').change(toggleSelectionFields);
    $('input[name="item_filters[]"]').change(toggleSelectionFields);
    toggleSelectionFields();

    $('#all_tracks').change(function() {
        if ($(this).is(':checked')) {
            $('#specific_track_categories').prop('disabled', true).prop('checked', false);
            $('#specific_tracks').prop('disabled', true).prop('checked', false);
            $('#track_category_ids').val(null).trigger('change');
            $('#track_ids').val(null).trigger('change');
        } else {
            $('#specific_track_categories').prop('disabled', false);
            $('#specific_tracks').prop('disabled', false);
        }
        toggleSelectionFields();
    });

    $('#all_items').change(function() {
        if ($(this).is(':checked')) {
            $('#specific_item_categories').prop('disabled', true).prop('checked', false);
            $('#specific_items').prop('disabled', true).prop('checked', false);
            $('#item_category_ids').val(null).trigger('change');
            $('#item_ids').val(null).trigger('change');
        } else {
            $('#specific_item_categories').prop('disabled', false);
            $('#specific_items').prop('disabled', false);
        }
        toggleSelectionFields();
    });

    $('.select2-enhanced').select2({
        placeholder: '{{ __("dashboard.Choose an option") }}',
        allowClear: true,
        language: '{{ app()->getLocale() }}',
        width: '100%',
        tags: false,
        dropdownAutoWidth: true,
    });

    $('#track_ids').select2({
        ajax: {
            url: '{{ route("dashboard.coupons.search.tracks") }}',
            dataType: 'json',
            delay: 250,
            data: params => ({ term: params.term, page: params.page || 1 }),
            processResults: (data, params) => ({
                results: data.results,
                pagination: { more: (params.page * data.per_page) < data.total }
            }),
            cache: true
        },
        placeholder: '{{ __("dashboard.Choose Tracks") }}',
        allowClear: true,
        minimumInputLength: 0,
        language: '{{ app()->getLocale() }}',
        width: '100%',
    });

    $('#item_ids').select2({
        ajax: {
            url: '{{ route("dashboard.coupons.search.items") }}',
            dataType: 'json',
            delay: 250,
            data: params => ({ term: params.term, page: params.page || 1 }),
            processResults: (data, params) => ({
                results: data.results,
                pagination: { more: (params.page * data.per_page) < data.total }
            }),
            cache: true
        },
        placeholder: '{{ __("dashboard.Choose Items") }}',
        allowClear: true,
        minimumInputLength: 0,
        language: '{{ app()->getLocale() }}',
        width: '100%',
    });
});
</script>
@endsection