@extends('layouts.front.app')

@section('title')
@endsection

@section('seo')
@endsection

@section('content')
    <div class="bg">
        <div class="container">

            @if (Session::has('success'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close btn" data-bs-dismiss="alert" aria-hidden="true">×</button>
                    <h5><i class="icon fas fa-check"></i> Success!</h5>
                    {{ Session::get('success') }}
                    @if (Session::has('checkoutUrl'))
                        <br>
                        <a href="{{ Session::get('checkoutUrl') }}" target="_blank">{{ Session::get('checkoutUrl') }}</a>
                    @endif
                </div>
            @endif

            <div class="row justify-content-center">
                <div class="col-12 col-lg-6">
                    <div class="bg-green p-3 rounded-1 text-center">
                        <img src="{{ asset('images/airpro-logo2.webp') }}" class="img-fluid mx-auto" width="250"
                            alt="...">
                        <h2 class="text-white fw-bold">Admin Payment Portal</h2>
                    </div>
                </div>
            </div>
            <br>
            <div class="row justify-content-center">
                <div class="col-12 col-lg-6">
                    <form action="" method="POST" class="fw-bold paymentForm" id="paymentForm">@csrf
                        <label for="">Customer Name</label>
                        <input type="text" name="customer_name" class="form-control rounded-2 p-2 bg-transparent"
                            id="customer_name" placeholder="" required></input>
                        @error('customer_name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        <label for="">Email Address</label>
                        <input type="email" name="email" class="form-control rounded-2 p-2 bg-transparent"
                            id="email" placeholder="" required></input>
                        @error('email')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        <label for="">Address</label>
                        <input type="text" name="address" class="form-control rounded-2 p-2 bg-transparent"
                            id="address" placeholder=""></input>
                        @error('address')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        <label for="">Contact Number</label>
                        <input type="text" name="contact" class="form-control rounded-2 p-2 bg-transparent"
                            id="contact_number" placeholder="" required></input>
                        @error('contact')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        <label for="">Amount</label>
                        <input type="number" name="amount" class="form-control rounded-2 p-2 bg-transparent"
                            id="amount" placeholder="" min="100" required></input>
                        @error('amount')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        <label for="">Remarks</label>
                        <input type="text" name="remarks" class="form-control rounded-2 p-2 bg-transparent"
                            id="remarks" placeholder=""></input>
                        @error('remarks')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        <br>
                        <h6>Generate for:</h6>

                        <div class="row justify-content-center align-items-center">
                            <div class="col-lg-4">
                                <button class="btn fw-bold" type="submit" onclick="setFormAction('PayMongo')">
                                    <img src="{{ asset('images/PayMongoLogo.png') }}" class="img-fluid mx-auto"
                                        width="250" alt="...">
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function setFormAction(paymentMethod) {
            const form = document.getElementById('paymentForm');
            if (paymentMethod === 'PayMongo') {
                form.action = "{{ url('paymongoPaymentRequest') }}";
            } else if (paymentMethod === 'Starpay') {
                form.action = "{{ url('starpayPaymentRequest') }}";
            }
        }
    </script>

    <!-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Check for success flash message

            // AJAX form submission
            $('.paymentForm').submit(function(e) {
                e.preventDefault();

                $.ajax({
                    method: "POST",
                    url: "{{ url('paymongoPaymentRequest') }}",
                    data: $(this).serialize(),
                    success: function(response) {
                        showSuccessAlert();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Check if the response contains JSON data
                        var errors = null;
                        try {
                            errors = JSON.parse(jqXHR.responseText);
                        } catch (e) {
                            // Ignore parsing errors
                        }
                        showErrorAlert(errors);
                    }
                });


                function showSuccessAlert() {
                    Swal.fire({
                        title: 'Success!',
                        text: 'Inquiry submitted successfully',
                        icon: 'success',
                        confirmButtonText: 'OK',
                        confirmButtonColor: "#2fa66e",
                        customClass: {
                            confirmButton: 'btn btn-success rounded-0'
                        }
                    }).then(function() {
                        location.reload();
                    });
                }


                function showErrorAlert(errors) {
                    var errorMessage = 'Inquiry submission failed';

                    // Check if there are validation errors
                    if (errors && errors.errors) {
                        // Iterate over each error and append it to the message
                        for (var key in errors.errors) {
                            if (errors.errors.hasOwnProperty(key)) {
                                errorMessage += '<br>' + errors.errors[key][0];
                            }
                        }
                    }

                    Swal.fire({
                        title: 'Error!',
                        html: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK',
                        confirmButtonColor: "#2fa66e",
                        customClass: {
                            confirmButton: 'btn btn-success rounded-0'
                        }
                    });
                }

            });
        });
    </script> -->

    <style>
        .bg {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="number"]:focus {
            box-shadow: none;
            border: gray 1px solid;
        }

        .bg-green {
            background-color: #1faf4b;
        }
    </style>
@endsection