@extends('layouts.main' )

@section('main-content')

<div class="nk-block-head">
    <div class="row g-gs">

        <div class="col-md-5 mx-auto">
            <div class="card card-bordered h-100 shadow">
                <div class="card-inner">
                    <div class="card-head">
                        <h5 class="card-title">Payment Validation</h5>
                    </div>
                    <form method="POST" action="{{ route('payment.validate', ['service' => $service, 'scratchCard' => $scratchCardID]) }}" class="form-validate">
                        @csrf

                        <div class="form-group">
                            <label class="form-label" for="payment_code">Payment Code</label>
                            <input type="text" class="form-control form-control-lg" id="payment_code" name="payment_code" value="{{ old('payment_code') }}" required placeholder="Enter Payment Code">
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-lg btn-block bg-custom-green text-white"> Validate</button>
                        </div>
                    </form>
                    <div>
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#UploadProofOfPaymentModal" class="small text-warning float-right mt-3">Upload Proof of Payment</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upload proof of payment -->
<div class="modal fade" tabindex="-1" id="UploadProofOfPaymentModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-custom-green text-white text-center">
                <h1 class="page-title fw-normal">Upload Proof Of Payment</h1>
                <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross text-white"></em>
                </a>
            </div>
            <div class="modal-body">
                <form action="{{ route('pop.upload', ['service' => $service]) }}" class="form-validate" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="type" value="pop">
                    <div class="form-group">
                        <label class="form-label" for="payment_code">Payment Code</label>
                        <input type="text" class="form-control" id="payment_code" name="payment_code" value="{{ old('payment_code') }}" placeholder="Enter Payment Code" required>
                        @error('payment_code')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <small class="font-weight-bold">Document must be jpg, jpeg or pdf format.</small>
                    </div>
                    <div class="form-group">
                        <label for="proof_of_payment">Select File</label>
                        <input type="file" class="form-control" id="proof_of_payment" name="proof_of_payment" required accept="application/pdf, .jpg, .jpeg">
                        @error('proof_of_payment')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <button class="btn btn-warning col-md-12" style="display: block" type="submit">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var old = {!! collect(old()) !!};

        if( old.length !== 0 ){
            if(old.type == 'pop'){
                $('#UploadProofOfPaymentModal').modal('show');
            }
        }
    });
</script>        
@endsection