@extends('admin.layout.app')

@section('title')
{{ __('Create') }} Winner
@endsection

@section('header')
<div class="page-header-content d-lg-flex">
    <div class="d-flex">
        <h4 class="page-title mb-0">
            Home - <span class="fw-normal">Winner Management</span>
        </h4>
    </div>
    <div class="d-lg-block my-lg-auto ms-lg-auto">
        <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3">
            <a href="{{ route('winners.index') }}" class="btn btn-outline-primary btn-labeled btn-labeled-start rounded-pill">
                <span class="btn-labeled-icon bg-primary text-white rounded-pill">
                    <i class="ph-arrow-circle-left"></i>
                </span>
                Back
            </a>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="col-md-12">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">{{ __('Create') }} Winner</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('winners.store') }}" class="validate" role="form" enctype="multipart/form-data">
                @csrf
                @include('admin.winner.form')
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(function () {
        $('.select').select2();
        $('#citySelection').on('change', function () {
            const isManual = $(this).val() === 'manual';
            const cityList = $('#cityList');

            cityList.prop('disabled', !isManual).prop('required', isManual);

            if (!isManual) {
                cityList.val(null).trigger('change');
            }
        });
        $('#from_date').on('change', function () {
            var fromDate = $(this).val();
            if (fromDate) {
                $('#to_date').attr('min', fromDate);
            } else {
                $('#to_date').removeAttr('min');
            }
        });

        $('#to_date').on('change', function () {
            var toDate = $(this).val();
            if (toDate) {
                $('#from_date').attr('max', toDate);
            } else {
                $('#from_date').removeAttr('max');
            }
        });
        $(document).on("input", ".prize-quantity", function () {
            $(this).val($(this).val().replace(/^0+(?=\d)/, ''));
        });
        $('.validate').validate({
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass).removeClass('is-invalid');
            },
            errorPlacement: function (error, element) {
                if (element.hasClass('select2-hidden-accessible')) {
                    error.appendTo(element.parent());
                } else if (element.parents().hasClass('form-control-feedback') || element.parents().hasClass('form-check') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

        $('.validate').submit(function (e) {
            e.preventDefault();

            if (!$('.validate').valid()) {
                return;
            }
            
            let isValid = false;
            $('.prize-quantity').each(function () {
                if (parseInt($(this).val()) > 0) {
                    isValid = true;
                    return false;
                }
            });

            if (!isValid) {
                new Noty({
                    layout: 'topRight',
                    text: "At least one prize quantity must be greater than zero.",
                    type: 'error',
                    timeout: 3000
                }).show();
                return;
            }
            
            $('#spinner').removeClass('d-none');
            $.ajax({
                url: $('.validate').attr('action'),
                type: $('.validate').attr('method'),
                data: $('.validate').serialize(),
                success: function (response) {
                    $('#spinner').addClass('d-none');
                    if(response.status)
                    {
                        new Noty({
                            layout: 'topRight',
                            text: response.message,
                            type: 'success',
                            timeout: 3000
                        }).show();
                        setTimeout(function() {
                            window.location.href = "{{ route('winners.index') }}";
                        }, 3000);
                    }else{
                        new Noty({
                            layout: 'topRight',
                            text: response.message,
                            type: 'error',
                            timeout: 3000
                        }).show();
                    }
                },
                error: function (xhr) {
                    $('#spinner').addClass('d-none');
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            new Noty({
                                layout: 'topRight',
                                text:  messages[0],
                                type: 'error',
                                timeout: 3000
                            }).show();
                        });
                    } else {
                        new Noty({
                            layout: 'topRight',
                            text: "An unexpected error occurred. Please try again.",
                            type: 'error',
                            timeout: 3000
                        }).show();
                    } 
                }
            });
        });
    });
</script>
@endsection