@extends('layouts.app')

@section('content')

<style>

body{
    background:#08111f;
    color:white;
    padding-bottom:90px;
}

.top-bar{
    background:#111827;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:0 0 20px 20px;
}

.wallet{
    background:linear-gradient(135deg,#22c55e,#16a34a);
    border-radius:20px;
    padding:25px;
}

.song-card{
    background:#111827;
    border-radius:20px;
    overflow:hidden;
}

.song-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.card-box{
    background:#111827;
    border-radius:18px;
    padding:15px;
}

.icon-box{
    background:#111827;
    padding:15px;
    border-radius:15px;
    text-align:center;
}

.section-title{
    font-size:20px;
    font-weight:700;
    margin-top:25px;
    margin-bottom:15px;
}

.bottom-nav{
    background:#111827;
}

.scratch{
    background:linear-gradient(
        135deg,
        #f59e0b,
        #ef4444
    );
    border-radius:20px;
    padding:25px;
    text-align:center;
}

</style>

<!-- HEADER -->



<div class="container mt-3">

    <!-- WALLET -->

    <div class="wallet text-center">

        <h6>Wallet Balance</h6>

        <h1>
            ৳ {{ auth()->user()->wallet_balance ?? 0 }}
        </h1>

        @auth

            <a href="{{ route('withdrawal') }}"
            class="btn btn-light">

            💸 Withdraw

            </a>

        @endauth

    </div>


    <!-- QUICK MENU -->

    <div class="row g-2 mt-3">

        <div class="col-4">
            <div class="icon-box">
                🎵
                <br>
                Songs
            </div>
        </div>

        <div class="col-4">
            <a href="{{ route('scratch') }}"
               class="text-decoration-none text-white">

                <div class="icon-box">
                    🎟
                    <br>
                    Scratch
                </div>

            </a>
        </div>

        <div class="col-4">
            <div class="icon-box">
                💰
                <br>
                Wallet
            </div>
        </div>

    </div>


    <!-- SONGS -->

    <div class="section-title">
        🔥 Latest Songs
    </div>

    <div class="row g-3">

        @foreach($songs as $song)

        <div class="col-md-3 col-6">

            <div class="song-card">

                <img src="{{ asset('storage/'.$song->cover) }}">

                <div class="p-3">

                    <h6>
                        {{ $song->title }}
                    </h6>

                    <p class="small text-secondary">
                        Premium Music
                    </p>

                    <h5>
                        ৳ {{ $song->price }}
                    </h5>

                    @auth

                        <a href="{{ route('payment.checkout',$song->id) }}"
                           class="btn btn-warning w-100 mb-2">

                            Buy Now

                        </a>

                        <a href="{{ route('wallet.buy.song',$song->id) }}"
                             class="btn btn-success w-100">

                        💰 Buy From Wallet

                        </a>

                    @else

                        <a href="{{ route('login') }}"
                           class="btn btn-warning w-100">

                            Login To Buy

                        </a>

                    @endauth

                </div>

            </div>
            
            <div class="d-flex justify-content-center align-items-center gap-3 mb-3">

                <button class="btn btn-danger minus-btn"
                        data-song="{{ $song->id }}">
                    -
                </button>

                <span id="qty-{{ $song->id }}">
                    1
                </span>

                <button class="btn btn-success plus-btn"
                        data-song="{{ $song->id }}">
                    +
                </button>

            </div>

            <input type="hidden"
                id="quantity-{{ $song->id }}"
                value="1">

            {{-- <h5>
                ৳ <span id="total-{{ $song->id }}">
                    {{ $song->price }}
                </span>
            </h5> --}}

        </div>

        @endforeach

    </div>


    <!-- SCRATCH -->

    <div class="section-title">
        🎟 Scratch Reward
    </div>

    <div class="scratch">

        <h3>
            Win Real Rewards
        </h3>

        <p>
            Buy Song → Get Scratch Card → Win Cash
        </p>

        @auth

        <a href="{{ route('scratch') }}"
           class="btn btn-dark">

            Open Scratch

        </a>

        @else

        <a href="{{ route('login') }}"
           class="btn btn-dark">

            Login First

        </a>

        @endauth

    </div>


    <!-- RECENT PURCHASES -->

    <div class="section-title">
        🎧 My Purchases
    </div>

    <div class="card-box">

        @forelse($purchases ?? [] as $purchase)

            <div class="d-flex justify-content-between">

                <span>
                    {{ $purchase->song->title }}
                </span>

                <a href="{{ route('download',$purchase->song_id) }}"
                   class="btn btn-success btn-sm">

                    Download

                </a>

            </div>

            <hr>

        @empty

            <p class="mb-0">
                No purchase yet
            </p>

        @endforelse

    </div>

</div>


<!-- BOTTOM NAV -->

<div class="fixed-bottom bottom-nav p-2">

    <div class="d-flex justify-content-around text-center">

        <a href="/"
           class="text-white text-decoration-none">

            🏠
            <br>
            <small>Home</small>

        </a>

        <a href="/"
           class="text-white text-decoration-none">

            🎵
            <br>
            <small>Songs</small>

        </a>

        <a href="{{ route('scratch') }}"
           class="text-white text-decoration-none">

            🎟
            <br>
            <small>Scratch</small>

        </a>

        @auth

       

        @else

        <a href="{{ route('login') }}"
           class="text-white text-decoration-none">

            👤
            <br>
            <small>Login</small>

        </a>

        @endauth

    </div>

</div>

<script>

document.querySelectorAll('.plus-btn')
.forEach(btn=>{

    btn.addEventListener('click',function(){

        let id=this.dataset.song;

        let qty=document.getElementById(
            'quantity-'+id
        );

        qty.value++;

        document.getElementById(
            'qty-'+id
        ).innerText=qty.value;

        updatePrice(id);

    });

});



document.querySelectorAll('.minus-btn')
.forEach(btn=>{

    btn.addEventListener('click',function(){

        let id=this.dataset.song;

        let qty=document.getElementById(
            'quantity-'+id
        );

        if(qty.value>1)
        {
            qty.value--;
        }

        document.getElementById(
            'qty-'+id
        ).innerText=qty.value;

        updatePrice(id);

    });

});



function updatePrice(id)
{
    let qty=
    document.getElementById(
        'quantity-'+id
    ).value;

    let price=
    parseFloat(
        document.getElementById(
            'song-price-'+id
        ).value
    );

    document.getElementById(
        'total-'+id
    ).innerText=
    qty*price;
}

</script>
@endsection