@extends('layouts.admin')

@section('title', 'Voucher Report')
@section('content-header', 'Voucher Report')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('voucher_report.store') }}" target="_blank" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="form-group">
                    <label for="type">Report Type</label>
                        <select name="type" class="form-control @error('report_type') is-invalid @enderror" id="type">

                        <option value="used">ALREADY USED VOUCHER</option>
                        <option value="available">AVAILABLE VOUCHER</option>
                        <option value="expired">EXPIRED VOUCHER</option>
                        <option value="unlimited">UNLIMITED VOUCHER</option>



                    </select>
                    @error('report_type')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group" id='unli'  style="overflow-y: auto; max-height: 200px;" >
                    <label for="voucher_type">Unlimited Voucher Type </label>
                    @php $voucherCount = count($voucher_unlimited); @endphp
                    
                    @foreach ($voucher_unlimited as $voucher)
                        <div class="form-check">
                            <input type="radio" name="voucher_type[]" value="{{ $voucher->vForm_no }}" id="voucher_type_{{ $voucher->id }}" class="form-check-input voucher-type-radio @error('voucher_type') is-invalid @enderror">
                            <label for="voucher_type_{{ $voucher->id }}" class="form-check-label">{{ $voucher->purpose }}</label>
                        </div>
                    @endforeach

                    @if ($voucherCount > 3)
                        <style>
                            .form-group::-webkit-scrollbar {
                                width: 6px;
                            }

                            .form-group::-webkit-scrollbar-thumb {
                                background-color: rgba(0, 0, 0, 0.3);
                                border-radius: 3px;
                            }
                        </style>
                    @endif
                    @error('voucher_type')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror

                </div>


                <div class="form-group" id='form' style="overflow-y: auto; max-height: 200px;">
                    <label for="voucher_type">Voucher Type</label>
                    @php $voucherCount = count($voucher_list); @endphp
                    <div class="form-check">
                        <input type="checkbox" name="voucher_type[]" value="All" id="voucher_type_all" class="form-check-input @error('voucher_type') is-invalid @enderror">
                        <label for="voucher_type_all" class="form-check-label">All</label>
                    </div>
                    @foreach ($voucher_list as $voucher)
                        <div class="form-check">
                            <input type="checkbox" name="voucher_type[]" value="{{ $voucher->vForm_no }}" id="voucher_type_{{ $voucher->id }}" class="form-check-input voucher-type-checkbox @error('voucher_type') is-invalid @enderror">
                            <label for="voucher_type_{{ $voucher->id }}" class="form-check-label">{{ $voucher->purpose }}</label>
                        </div>
                    @endforeach
                    @if ($voucherCount > 3)
                        <style>
                            .form-group::-webkit-scrollbar {
                                width: 6px;
                            }

                            .form-group::-webkit-scrollbar-thumb {
                                background-color: rgba(0, 0, 0, 0.3);
                                border-radius: 3px;
                            }
                        </style>
                    @endif
                    @error('voucher_type')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>




                <div class="form-group" id='date'>
                    <label for="start_date">Start Date</label><small style="color:red; margin:4px;">*Ignore if require to view All Used Voucher</small>
                    <input type="date" name="start_date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" value="{{ old('start_date') }}"  max="{{ date('Y-m-d') }}">
                    @error('start_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
            
                    <label for="end_date">End Date</label><small style="color:red; margin:4px;">*Optional</small>
                    <input type="date" name="end_date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" value="{{ old('end_date') }}"  max="{{ date('Y-m-d') }}">
                    @error('start_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>


                


                <button class="btn btn-primary float-right" type="submit">Generate Report</button>
            </form>
        </div>
    </div>
    <!-- voucher check function -->
    <div class='card'>
        <div class='card-body'>
        @if(session('info'))
            <script>
                alert('{{ session('info') }}'); // Display the info message
                window.location.href = document.referrer; // Redirect to the referring page
            </script>
        @endif
            <form action="{{ route('voucher_report.check') }}" target="_blank" method="POST" enctype="multipart/form-data">
            @csrf
                <div class="form-group" id='date'>
                    <label for="start_date">Enter Voucher Code</label>
                    <input type="text" name="voucher_code" class="form-control @error('start_date') is-invalid @enderror" id="voucher_code" placeholder="INPUT VOUCHER CODE HERE">     
                </div>
                    <button class="btn btn-primary float-right" name='type' value='availability' type="submit">Check Availability</button>
                    <button class="btn btn-primary float-right mr-2" name='type' value='usage' type="submit">Check Usage</button>


            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var dateDiv = document.getElementById('date');
        var formDiv = document.getElementById('form');
        var unliDiv = document.getElementById('unli');

        unliDiv.style.display = 'none';

        document.getElementById('type').addEventListener('change', function() {
            dateDiv.style.display = this.value === 'used' ? 'block' : 'none';
            formDiv.style.display = this.value === 'unlimited' ? 'none' : 'block';
            unliDiv.style.display = this.value === 'unlimited' ? 'block' : 'none';
        });
    });


</script>
<script>
    $(document).ready(function() {
        $('.voucher-type-checkbox').on('change', function() {
            if ($(this).val() === 'All') {
                $('.voucher-type-checkbox').not(this).prop('checked', false).prop('disabled', true);
            } else {
                $('.voucher-type-checkbox').prop('disabled', false);
                if ($('.voucher-type-checkbox:checked').not('#voucher_type_all').length > 0) {
                    $('#voucher_type_all').prop('checked', false).prop('disabled', true);
                } else {
                    $('#voucher_type_all').prop('disabled', false);
                }
            }
        });
        $('#voucher_type_all').on('change', function() {
            if ($(this).is(':checked')) {
                $('.voucher-type-checkbox').prop('checked', false).prop('disabled', true);
            } else {
                $('.voucher-type-checkbox').prop('disabled', false);
            }
        });
    });
</script>

@endsection