@extends("website.service-providers.layouts.layout")
@section('title',"Services")
@section("body")
<section class="banner-services">
        <img class="banner-background-ellipse" src="{{ asset('webAssets/assets/images/banner-bg-img.png') }}" alt="">
</section>

    <!--- Breadcrumbs section -->

    <section class="services-breadcrumb-section dashboard-breadcrumb">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                    <li class="breadcrumb-item active" aria-current="page">Profile Info</li>
                </ol>
            </nav>

        </div>
    </section>


    <!-- Main section started -->

    <section class="dashboard-main">
        <div class="container">
            <div class="row">
                @include("website.service-providers.includes.sidebar")
                @include("website.layouts.modal")                
              
                <div class="main-content">
                <div class="main-content-wrapper my-profile">
                    <div class="payment-block">
                        <h3 class="font-size-24 py-3">Payment</h3>
                        <div class="provider-payment payment-details-item">
                            <div class="payments-items w-100">
                                <div class="payment-gateways-block">
                                    <div class="payment-gateway-items">
                                        <div class="accordion payment" id="paymentaccordion">
                                            <div class="accordion-item">
                                                <!-- <h2 class="accordion-header">
                                                    <button
                                                        class="accordion-button paymemt-btn font-size-18 fw-bold grey-color payment-accordion-btn"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#paymentAccordionOne" aria-expanded="true"
                                                        aria-controls="paymentAccordionOne">
                                                        Apple Pay
                                                    </button>
                                                </h2> -->
                                                <!-- <div id="paymentAccordionOne" class="accordion-collapse collapse"
                                                    data-bs-parent="#paymentaccordion">
                                                    <div class="accordion-body px-0">
                                                        <div class="payment-body-items d-flex justify-content-between align-items-center">
                                                            <p class="grey-color">Master Card XXXX 8789</p>
                                                            <div class="payment-body-action-btn d-flex gap-12px align-items-center">
                                                                <p class="grey-color">12 / 25</p>
                                                                <button class="btn btn-delete border-0 py-0"><img
                                                                        src="./assets/images/delete-icon.svg"
                                                                        alt=""></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> -->
                                            </div>

                                            <div class="accordion-item">
                                                <h2 class="accordion-header">
                                                    <button
                                                        class="accordion-button paymemt-btn font-size-18 fw-bold grey-color payment-accordion-btn"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#paymentAccordionTwo" aria-expanded="true"
                                                        aria-controls="paymentAccordionTwo">
                                                        Cards
                                                    </button>
                                                </h2>
                                               
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="payment-action-btn">
                                    <button type="button" class="btn border-0 blue-color text-decoration-underline p-0"
                                        data-bs-toggle="modal" data-bs-target="#paymentCard">
                                        Add New Card
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Modal -->
                        <div class="modal fade" id="paymentCard" tabindex="-1" aria-labelledby="paymentCardLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content gap-8px">
                                    <div class="modal-header">
                                        <h2 class="modal-title fs-5" id="paymentCardLabel">Add New Card</h2>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="profile-info d-flex flex-column">
                                            <div class="edit-profile-form">
                                                <form method="POST" action="{{ route('profile.saveSpCardDetails') }}" enctype="multipart/form-data" class="d-flex flex-column forms">
                                                    @csrf
                                                    @method('post')

                                                    <div class="edit-form-field d-flex flex-column">
                                                        <h3 class="font-size-14">Card Holder Name</h3>
                                                        <input type="text" name="cardHolderName" placeholder="Card Holder Name">
                                                    </div>
                                                    <div class="edit-form-field d-flex flex-column">
                                                        <h3 class="font-size-14">Card Number</h3>
                                                        <input type="number" name="cardNumber" placeholder="Card Number">
                                                    </div>
                                                    <div class="edit-form-field d-flex">
                                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                                            <h3 class="font-size-14">Expiry (MM/YY)</h3>
                                                            <input type="text" name="expiry" class="w-100" placeholder="MM/YY">
                                                            
                                                        </div>
                                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                                            <h3 class="font-size-14">CVV</h3>
                                                            <input type="number" name="cvv" id="cvv" class="w-100" placeholder="CVV" oninput="validateCvv(this)">
                                                        </div>
                                                    </div>
                                                    <div class="edit-form-field d-flex flex-column">
                                                        <h3 class="font-size-14">Zip/ Postal Code</h3>
                                                        
                                                        <input type="number" id="postalCode" placeholder="12365" name="postalCode" min="0" max="5" oninput="validateNumber(this)">

                                                    </div>
                                                    <div class="form-check d-flex align-items-center gap-8px m-0">
                                                        <input class="form-check-input" type="checkbox" value="1" id="paymentCheck" name="isCardSavePermanentHidden">
                                                        <label class="form-check-label grey-color" for="paymentCheck">
                                                            Save this card for faster payments
                                                        </label>
                                                        <input type="hidden" name="isCardSavePermanent" value="0">
                                                    </div>

                                                    <button type="submit" class="btn btn-primary w-100">Save Card</button>
                                                </form>

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

                    </div>
                </div>
            </div>
                
            </div>
        </div>
    </section>





@endsection


@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif

<script>
document.addEventListener("DOMContentLoaded", function() {
    const checkbox = document.getElementById("paymentCheck");
    const hiddenInput = document.querySelector('input[name="isCardSavePermanent"]');

    checkbox.addEventListener("change", function() {
        hiddenInput.value = this.checked ? "1" : "0";
    });
});

<!-- Restrict input number to take certain values only -->

//CVV
function validateCvv(input) {

if (input.value.length > 3) {
    input.value = input.value.slice(0, 3);
}
}

// Postal Code

function validateNumber(input) {

if (input.value.length > 5) {
    input.value = input.value.slice(0, 5);
}
}

      
   const input = document.getElementById('formattedInput');

input.addEventListener('input', function () {
    let value = this.value.replace(/\D/g, ''); // Remove any non-digit characters
    if (value.length > 6) {
        value = value.slice(0, 6); // Limit to 6 digits total
    }

    if (value.length > 2) {
        value = value.slice(0, 2) + '/' + value.slice(2);
    }

    this.value = value;
});

// Prevent non-numeric characters during keypress, allowing slash at correct position
input.addEventListener('keypress', function (e) {
    if (!/\d/.test(e.key)) {
        e.preventDefault();
    }
});

// Prevent pasting non-numeric characters
input.addEventListener('paste', function (e) {
    const pasteData = e.clipboardData.getData('text');
    if (!/^\d+$/.test(pasteData)) {
        e.preventDefault();
    }
});

document.querySelector('form').addEventListener('submit', function(e) {
    if (!/^\d{2}\/\d{4}$/.test(input.value)) {
        e.preventDefault();
        alert("Please enter a value in the format 99/9999.");
        input.focus();
    }
});
</script>