@extends('user.layout')

@section('content')
<style>
    :root {
        --jewel-gold: #c9a227;
        --jewel-dark: #1a1a1a;
        --jewel-cream: #fdfbf7;
    }



    /* Card & Layout Refinement */
    .product-card {
        border: none;
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .main-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    /* Typography */
    .product-title {
        font-family: 'Playfair Display', serif;
        /* Suggest adding this font */
        font-size: 32px;
        font-weight: 700;
        /* color: var(--jewel-dark); */
        letter-spacing: -0.5px;
    }

    .sku-text {
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 12px;
        color: #888;
    }

    .price {
        font-size: 30px;
        font-weight: 300;
        color: var(--jewel-gold);
    }

    .old-price {
        text-decoration: line-through;
        color: #bbb;
        font-size: 18px;
        margin-left: 10px;
    }

    /* Form Elements */
    .custom-select,
    .custom-input {
        border: 1px solid #e0e0e0;
        border-radius: 0;
        /* Sharp edges look more premium in jewelry */
        border-bottom: 2px solid #eee;
        padding: 12px;
        transition: 0.3s;
    }

    .custom-select:focus,
    .custom-input:focus {
        border-bottom-color: var(--jewel-gold);
        box-shadow: none;
    }

    .upload-box {
        border: 1px dashed var(--jewel-gold);
        /* background-color: var(--jewel-cream); */
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        color: #8b5e3c;
    }

    .upload-box img {
        max-width: 100%;
        max-height: 100px;
        border-radius: 8px;
        margin-top: 10px;
    }

    /* Buttons */
    .btn-buy {
        background: var(--jewel-dark);
        color: #fff;
        border: none;
        border-radius: 0;
        padding: 15px 40px;
        font-size: 14px;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: 0.4s;
        width: 100%;
    }

    .btn-buy:hover {
        background: var(--jewel-gold);
        color: white;
    }

    .zoom-container {
        position: relative;
        overflow: hidden;
        border-radius: 20px 0 0 20px;
        background: #fdfdfd;
        height: 100%;
        min-height: 500px;
    }

    @media (max-width: 991px) {
        .zoom-container {
            border-radius: 20px 20px 0 0;
        }
    }

    .scroll-wrapper {
        position: relative;
        overflow: hidden;
        padding: 20px 40px;
    }

    .scrolling-cards {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-behavior: smooth;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .scrolling-cards::-webkit-scrollbar {
        display: none;
    }

    .bank-card {
        min-width: 288px;
        scroll-snap-align: center;
        flex-shrink: 0;

        height: 160px;
        border-radius: 18px;
        padding: 18px;
        color: #fff;
        cursor: pointer;

        background: linear-gradient(135deg, #0a1f44, #163b7a);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

        transition: all 0.3s ease;
    }

    .bank-card.active {
        transform: scale(1.05);
        border: 2px solid #ffd700;
    }

    .bank-card.blur {
        filter: blur(3px);
        opacity: 0.6;
    }

    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;

        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;

        background: #0a1f44;
        color: #fff;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .nav-btn.left {
        left: 5px;
    }

    .nav-btn.right {
        right: 5px;
    }

    .nav-btn:hover {
        background: #163b7a;
    }

    .scroll-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
        padding: 20px 0;
    }

    .scrolling-cards {
        display: flex;
        gap: 20px;
    }

    .scrolling-cards.paused {
        animation-play-state: paused;
    }

    .bank-card {
        min-width: 260px;
        height: 160px;
        border-radius: 18px;
        padding: 18px;
        color: #fff;
        cursor: pointer;
        position: relative;

        background: linear-gradient(135deg, #0a1f44, #163b7a);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

        transition: all 0.4s ease;
    }

    .bank-card:hover {
        transform: translateY(-5px);
    }

    .bank-card.active {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        border: 2px solid #ffd700;
    }

    .bank-card.blur {
        filter: blur(3px);
        opacity: 0.6;
    }

    .card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
    }

    .card-top i {
        font-size: 22px;
    }

    .card-number {
        margin: 20px 0;
        letter-spacing: 2px;
        font-size: 18px;
    }

    .card-details {
        display: flex;
        justify-content: space-between;
    }

    .card-details small {
        font-size: 10px;
        opacity: 0.7;
    }

    .card-details p {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
    }
</style>
<div class="row align-items-center justify-content-between mb-2">
    <div class="col-auto">

        <h4 class="mb-0"><a href="{{ route('user.purchase_card') }}" class="btn btn-white btn-icon me-3 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>Buy Product</h4>
    </div>
</div>

<div class="card product-card">
    <div class="row g-0">
        <div class="col-lg-6">
            <div class="zoom-container d-flex align-items-center justify-content-center">
                <img src="{{ asset('storage/' . $package->package_image) }}" class="main-img zoom-img"
                    alt="Package Image">
            </div>
        </div>

        <div class="col-lg-6">
            <div class="p-4 p-md-5">
                <!-- <span class="sku-text">Collection ID: PKG{{ $package->id }}</span> -->
                <span class="product-title text-warning mt-2 mb-3">{{ $package->name }}</span>

                <div class="d-flex align-items-baseline">
                    <span class="price">₹ {{ $package->price }}</span>
                    <span class="old-price">₹ {{ $package->price + 500 }}</span>
                </div>

                <!-- <div class="description-box mb-4 p-3"
                                style="background: var(--jewel-cream); border-left: 3px solid var(--jewel-gold);">
                                <p class="text-muted small mb-0">
                                    <strong>Craftsmanship:</strong> {{ $package->description }}
                                </p>
                            </div> -->

                <!-- <hr class="my-4" style="opacity: 0.1;"> -->

                <form action="{{ route('user.package_request') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- Hidden Package ID -->
                    <input type="hidden" name="package_id" value="{{ $package->id }}">
                    {{-- <div class="col-lg-6 col-sm-12">
                            <label class="small fw-bold text-uppercase">Ring Size</label>
                            <select class="form-select custom-select">
                                <option>14 (Standard)</option>
                                <option>16 (Large)</option>
                            </select>
                        </div> --}}
                    {{-- <div class="col-lg-6 col-sm-12">
                            <label class="small fw-bold text-uppercase">Material</label>
                            <select class="form-select custom-select">
                                <option>Rose Gold</option>
                                <option>Yellow Gold</option>
                            </select>
                        </div> --}}
                    <input type="hidden" name="bank_id" id="selectedBankId">
                    <div class="row">
                        <div class="scroll-wrapper">

                            <!-- Navigation Buttons -->
                            <button class="nav-btn left" id="prevBtn" type="button">
                                <i class="ti tabler-chevron-left"></i>
                            </button>

                            <div class="scrolling-cards p-5" id="cardContainer">

                                @foreach($banks as $bank)
                                <div class="bank-card" data-id="{{ $bank->id }}">
                                    <div class="card-top">
                                        <i class="ti tabler-building-bank"></i>
                                        <span>{{ $bank->bank_name }}</span>
                                    </div>

                                    <div class="card-number">
                                        {{ $bank->account_number }}
                                    </div>

                                    <div class="card-details">
                                        <div>
                                            <small>Holder</small>
                                            <p>{{ $bank->account_holder }}</p>
                                        </div>
                                        <div>
                                            <small>IFSC</small>
                                            <p>{{ $bank->ifsc }}</p>
                                        </div>
                                    </div>
                                </div>
                                @endforeach

                            </div>
                            <button class="nav-btn right" id="nextBtn" type="button">
                                <i class="ti tabler-chevron-right"></i>
                            </button>

                        </div>


                        <div class="col-8 mt-4">
                            <label class="small fw-bold text-uppercase text-white">Transaction ID</label>
                            <input type="text" name="transaction_id" class="form-control text-warning"
                                value="{{ old('transaction_id') }}" placeholder="Enter Transaction ID">

                            @error('transaction_id')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-4 mt-4">
                            <label class="small fw-bold text-uppercase text-white">GST</label>
                            <input type="text" name="gst" class="form-control text-warning" value="15%" readonly>

                            @error('gst')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    <div class="col-12 mt-4">
                        <label class="small fw-bold text-uppercase mb-2 d-block text-white">Proof of Payment</label>
                        <div class="upload-box" id="uploadBox">
                            <i class="ti tabler-camera mb-1" style="font-size:24px;"></i>
                            <div class="upload-text fw-bold text-white">Upload Receipt</div>
                            <small class="text-muted">High resolution JPG or PNG</small>
                            <input type="file" name="payment_image" id="imageInput" accept="image/png, image/jpeg"
                                hidden>
                        </div>
                        @error('payment_image')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 mt-5">
                        <button type="submit" class="btn btn-primary btn-buy rounded-3">
                            💎 Own It Now
                        </button>
                        <p class="text-center text-muted mt-3 mb-0" style="font-size: 11px;">
                            <i class="ti tabler-lock"></i> Fully encrypted & secure transaction
                        </p>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>


<script id="fixupload">
    document.addEventListener("DOMContentLoaded", function() {

        // Zoom Effect (same)
        const container = document.querySelector('.zoom-container');
        const img = document.querySelector('.zoom-img');

        if (container && img) {
            container.addEventListener("mousemove", function(e) {
                const rect = container.getBoundingClientRect();
                const x = ((e.clientX - rect.left) / rect.width) * 100;
                const y = ((e.clientY - rect.top) / rect.height) * 100;

                img.style.transformOrigin = `${x}% ${y}%`;
                img.style.transform = "scale(1.8)";
            });

            container.addEventListener("mouseleave", function() {
                img.style.transform = "scale(1)";
            });
        }

        // Upload Handling
        const uploadBox = document.getElementById('uploadBox');
        const imageInput = document.getElementById('imageInput');

        uploadBox.addEventListener('click', () => imageInput.click());

        imageInput.addEventListener('change', function() {
            const file = this.files[0];

            if (file) {

                if (file.size > 2 * 1024 * 1024) {
                    alert("File size exceeds 2MB");
                    this.value = '';
                    return;
                }

                const reader = new FileReader();

                reader.onload = function(e) {


                    uploadBox.querySelector('.upload-text').innerText = file.name;


                    let imgTag = uploadBox.querySelector('img');

                    if (!imgTag) {
                        imgTag = document.createElement('img');
                        uploadBox.appendChild(imgTag);
                    }

                    imgTag.src = e.target.result;
                    imgTag.style.maxWidth = "100%";
                    imgTag.style.marginTop = "10px";
                }

                reader.readAsDataURL(file);
            }
        });

    });
</script>
<script>
    const container = document.getElementById('cardContainer');
    const cards = document.querySelectorAll('.bank-card');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    const selectedBankInput = document.getElementById('selectedBankId');

    const scrollAmount = 280;

    // 👉 Navigation
    nextBtn.addEventListener('click', () => {
        container.scrollBy({
            left: scrollAmount,
            behavior: 'smooth'
        });
    });

    prevBtn.addEventListener('click', () => {
        container.scrollBy({
            left: -scrollAmount,
            behavior: 'smooth'
        });
    });

    // 👉 Card Selection + BANK ID STORE
    cards.forEach(card => {
        card.addEventListener('click', () => {

            cards.forEach(c => {
                c.classList.remove('active');
                c.classList.add('blur');
            });

            card.classList.add('active');
            card.classList.remove('blur');

            // ✅ முக்கியம்
            const bankId = card.getAttribute('data-id');
            selectedBankInput.value = bankId;

            console.log("Selected Bank ID:", bankId);

            card.scrollIntoView({
                behavior: 'smooth',
                inline: 'center',
                block: 'nearest'
            });
        });
    });
</script>
@endsection