@extends('user.layout')

@section('content')
<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5 class="mb-0"><a href="{{ route('user.advance_list') }}" class="btn btn-white btn-icon me-3 shadow-sm waves-effect waves-light">
                <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>
                    <path d="M15 6l-6 6l6 6"></path>
                </svg>
            </a>Purchase Advance</h5>
    </div>
    <div class="col-auto"></div>
    <div class="col-auto">
        <a href="{{ route('user.purchase_advance_history') }}" class="btn btn-primary">
            Advance Request Report
        </a>
    </div>
</div>

<style>
    .scroll-wrapper {
        position: relative;
        overflow: hidden;
    }

    .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%;
    }

    .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;
    }


    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #133d45;
        --free: #ffd700;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }

    .container {
        border-radius: 0.6em;
        padding: 20px;
        background-color: #133d45 !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control {
        margin-bottom: 10px;
        /* padding-bottom: 20px; */
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control {
        border-radius: 6px;
        background-color: #133d45 !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select {
        border-radius: 6px;
        background-color: #133d45 !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    input::placeholder,
    textarea::placeholder {
        color: #a8a6a6 !important;
        opacity: 0.7;
    }

    .form-control input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.success input {
        border-color: var(--success-color);
    }

    .form-control.error input {
        border-color: var(--error-color);
    }

    .form-control small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }

    .btn-submit {
        cursor: pointer;
        background: #ffd700 !important;
        font-size: 16px;
        color: black !important;
        padding: 0.618em 1.2em;
        border-radius: 0.4em;

    }

    .btn-submit {
        outline: 0;
        background-color: #ffd700;
    }

    .card {
        background-color: #133d45 !important;
        color: White !important;
    }

    .form-label {
        color: White !important;
    }

    .news-marquee {
        width: 100%;
        overflow: hidden;
        background: #111;
        color: #fff;
        padding: 10px 0;
        position: relative;
        border-radius: 6px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        background: var(--form-bg);
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }
</style>
<!-- Center Card -->
<div class="row justify-content-center">
    <div class="col-lg-8 col-md-9">

        <div class="card shadow-sm border-0 registration-card p-3">
            <div class="card-body p-5">



                <div class="section-title mt-1">
                    <span><i class="ti tabler-shopping-cart icon-base me-1"></i>Purchase Advance</span>
                </div>

                <form action="{{ route('user.store_investment') }}" method="POST" enctype="multipart/form-data"
                    id="investmentForm">

                    @csrf
                    <input type="hidden" name="bank_id" id="selectedBankId">
                    <div class="row">

                        <!-- Type -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="package" id="type" value="22K" readonly>
                            <!-- <select class="form-select level-input @error('package') is-invalid @enderror" name="package">
                                <option value="">Select</option>
                                <option value="omiga_33" {{ old('package') == 'omiga_33' ? 'selected' : '' }}>
                                    Omiga Gold 33
                                </option>
                                <option value="omiga_22" {{ old('package') == 'omiga_22' ? 'selected' : '' }}>
                                    Omiga Gold 22
                                </option>
                            </select> -->

                            @error('package')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <!-- Advance Amount -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Advance Amount <span class="text-danger">*</span></label>
                            <input type="number"
                                step="1"
                                min="0"
                                class="form-control @error('advance_amount') is-invalid @enderror"
                                name="advance_amount"
                                value="{{ old('advance_amount') }}"
                                placeholder="Enter Advance Amount">
                            @error('advance_amount')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="section-title mt-1">
                            <span><i class="ti tabler-building-bank icon-base me-1"></i>Bank</span>
                        </div>
                        <div class="scroll-wrapper mb-3">

                            <!-- 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">
                                @forelse($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>
                                @empty
                                <p class="text-center text-muted">No bank details found</p>
                                @endforelse
                            </div>

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

                        </div>
                        <div class="section-title mt-1 mb-3">
                            <span><i class="ti tabler-transfer icon-base me-1"></i>Transaction Details</span>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Transaction ID<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('transaction_id') is-invalid @enderror"
                                name="transaction_id" value="{{ old('transaction_id') }}" placeholder="Enter Transaction ID">

                            @error('transaction_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Upload Receipt -->
                        <div class="mb-4 col-md-6">
                            <label class="form-label">
                                Upload Your Advance Receipt <span class="text-danger">*</span>
                            </label>

                            <div class="border border-secondary rounded p-3 text-center position-relative"
                                style="border-style:dashed !important; cursor:pointer;">

                                <input type="file" name="receipt"
                                    class="form-control d-none @error('receipt') is-invalid @enderror"
                                    id="receiptUpload" accept="image/*">

                                <label for="receiptUpload" class="mb-0 w-100" style="cursor:pointer;">
                                    <div id="uploadPlaceholder">
                                        <i class="menu-icon icon-base ti tabler-upload fs-3"></i>
                                        <p class="mb-0 mt-2">Upload</p>
                                    </div>
                                </label>

                                <!-- Preview -->
                                <div id="imagePreviewContainer" class="mt-3 d-none position-relative">
                                    <img id="imagePreview" class="img-fluid rounded shadow-sm"
                                        style="max-height:200px;">
                                    <button type="button"
                                        class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 rounded-circle"
                                        id="removeImage" style="width:30px;height:30px;padding:0;">✕</button>
                                </div>

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

                    </div>
                    <!-- Buttons -->
                    <div class="d-flex justify-content-center gap-2">
                        <!-- <button type="reset" class="btn btn-outline-secondary">Discard</button> -->
                        <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
                    </div>

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


    </div>
</div>


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

    /* =========================
       IMAGE PREVIEW SCRIPT
    ========================= */
    const receiptInput = document.getElementById('receiptUpload');
    const previewContainer = document.getElementById('imagePreviewContainer');
    const previewImage = document.getElementById('imagePreview');
    const uploadPlaceholder = document.getElementById('uploadPlaceholder');
    const removeButton = document.getElementById('removeImage');

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

            if (file) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    previewImage.src = e.target.result;
                    previewContainer.classList.remove('d-none');
                    uploadPlaceholder.classList.add('d-none');
                };

                reader.readAsDataURL(file);
            }
        });
    }

    if (removeButton) {
        removeButton.addEventListener('click', function () {
            receiptInput.value = "";
            previewImage.src = "";
            previewContainer.classList.add('d-none');
            uploadPlaceholder.classList.remove('d-none');
        });
    }


    /* =========================
       BANK CARD SCROLL + SELECT
    ========================= */
    const container = document.getElementById('cardContainer');
    const cards = document.querySelectorAll('.bank-card');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    const hiddenInput = document.getElementById('selectedBankId');

    const scrollAmount = 280;

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

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

    cards.forEach(card => {
        card.addEventListener('click', () => {

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

            // activate selected
            card.classList.add('active');
            card.classList.remove('blur');

            // set selected bank id
            if (hiddenInput) {
                hiddenInput.value = card.getAttribute('data-id');
            }

            // center scroll
            card.scrollIntoView({
                behavior: 'smooth',
                inline: 'center',
                block: 'nearest'
            });
        });
    });

    // 👉 Default select first bank
    if (cards.length > 0) {
        cards[0].click();
    }


    /* =========================
       FORM SUBMIT LOADING
    ========================= */
    const form = document.getElementById('investmentForm');
    const submitBtn = document.getElementById('submitBtn');

    if (form) {
        form.addEventListener('submit', function () {
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerText = "Processing...";
            }
        });
    }

});
</script>
@endsection