@extends('layouts.admin')

@section('title', 'Voucher Detail')
@section('content-header', 'Voucher Detail')
@section('content-actions')

@section('content')

        <div class="card">
            <div class="card-body">

                <form action="{{ route('vouchers.update', ['voucher' => $vou->vForm_no]) }}" method="POST">
                    @method('PUT') <!-- Specify the method as PUT -->
                    @csrf
                    @php
                        $date = date('Y-m-d H:i:s');
                    @endphp
                    <hr>

                    <h5><u>Voucher Details</u></h5>

                    <div class="form-group">
                        <label>Voucher ID : {{$vou->vForm_no}}</label>
                    </div>

                    <div class="form-group">
                        <label>Used On : {{$vou->BID}}</label>
                    </div>

                    <div class="form-group">
                        <label>Created By : {{$vou->cr_by}}</label>
                    </div>

                    <div class="form-group">
                        <label>Created On : {{$vou->cr_dd}}</label>
                    </div>

                    <div class="form-group">
                        <label>Status :
                            @if($vou->status == '4') 
                                <span class="right badge badge-danger">Deactivated</span>  
                            @elseif($status == 'expired')
                               <span class="right badge badge-danger">Expired</span>
                            @elseif($vou->status == '3')
                                <span class="right badge badge-success">Activated</span>
                            @elseif($vou->status == '1')
                                <span class="right badge badge-warning">Require Activation</span>
                            @else
                                <span class="right badge badge-secondary">Voucher Void</span>
                            @endif
                        </label>
                    </div>
                    <small color="red">
                        <b>!</b> You can only update during 'Require Activation'.
                        </br>
                        <b>!</b> Deactivate delete all existing voucher if none of them being used.
                        </br>
                        </br>
                    </small>
                    <hr>


                    <h5><u>Voucher Details</u></h5>


                    <div class="form-group">
                        <label for="start_date">Start Date</label>
                        <input type="date" name="start_date" class="form-control" id="start_date"
                               value="{{ $vou->start_dd }}">
                        @error('effective_date')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="expiry_date">Expiry Date</label>
                        <input type="date" name="expiry_date" class="form-control " id="expiry_date"
                               value="{{ $vou->expiry_dd }}">
                        @error('expiry_date')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>


                    <div class="form-group">
                        <label for="purpose">Reason/Purpose</label>
                        <input type="text" name="purpose" class="form-control" id="purpose" placeholder="Reason/Purpose"
                               value="{{ $vou->purpose }}">
                        @error('purpose')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="purpose">Total Amount</label>
                        <input type="text" name="amount" class="form-control" id="amount" placeholder="Enter Amount" value="{{ $vou->voucher_amt }}">
                        @error('amount')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="purpose">Total Quantity</label>
                        <input type="text" name="quantity" class="form-control" id="quantity" placeholder="Enter Quantity" value="{{ $vou->cnt }}">
                        @error('quantity')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>


                    @if($vou->status == '1')
                        <a href="{{ route('vouchers.activate', $vou->vForm_no) }}" style="margin:4px;"
                           class="btn btn-primary float-right">Activate</a>
                    @endif
                    @if($allow_update && $vou->status == '1')
                        <button style="margin:4px;" class="btn btn-primary float-right" type="submit">Update</button>
                    @endif
                    @if($vou->status == '3')
                        <a href="#" style="margin:4px;" class="btn btn-primary float-right"
                           onclick="showVoucherList('{{ route('vouchers.list', $vou->vForm_no) }}')">Show Voucher
                            List</a> 
                        @if($status != 'expired')
                            <a href="{{ route('vouchers.QRPrint_all', $vou->vForm_no) }}" style="margin:4px;"
                           class="btn btn-primary float-right" id="printBtn" target="_blank">Print Voucher</a>
                       
                           <a href="{{ route('vouchers.deactivate', $vou->vForm_no) }}" style="margin:4px;"
                           class="btn btn-primary float-right">Deactivate</a>
                        @endif
                    @endif
                    <!-- @if($vou->status == '4')
                        <a href="{{ route('vouchers.activate', $vou->vForm_no) }}" style="margin:4px;"
                           class="btn btn-primary float-right">Re-Activate</a>
                    @endif -->
                </form>
            </div>
        </div>

        <!-- Overlay form HTML -->
        <div id="overlayForm" style="display:none;">
            <form id="printSettingsForm">
                <label for="width">Width:</label>
                <input type="number" name="width" id="width" required min="100" max="200">

                <label for="height">Height:</label>
                <input type="number" name="height" id="height" required min="100" max="200">

                <button type="submit" id="submitBtn">Print</button>
            </form>
        </div>

    @endsection
    @section('js')
        <script>
            function showVoucherList(url) {
                window.open(url, 'voucherListWindow', 'width=900,height=500');
            }
        </script>
        <!-- <script>
            const printBtn = document.getElementById('printBtn');
            const overlayForm = document.getElementById('overlayForm');
            const printSettingsForm = document.getElementById('printSettingsForm');
            const submitBtn = document.getElementById('submitBtn');

            // Show the overlay form when the Print Voucher button is clicked
            printBtn.addEventListener('click', (event) => {
                event.preventDefault();
                overlayForm.style.display = 'block';
            });

            // Submit the print settings and open the print URL in a new tab
            printSettingsForm.addEventListener('submit', (event) => {
                event.preventDefault();
                const width = document.getElementById('width').value;
                const height = document.getElementById('height').value;
                const printUrl = printBtn.href + `?width=${width}&height=${height}`;
                window.open(printUrl, '_blank');
                overlayForm.style.display = 'none'; // Hide the overlay form
            });

            // Check for input value and prevent form submission if input is invalid
            submitBtn.addEventListener('click', (event) => {
                if (widthInput.value > 200 || heightInput.value > 200) {
                    alert('The maximum value for width and height is 200.');
                    event.preventDefault(); // Prevent form submission
                }
            });
        </script> -->

@endsection