@extends('layouts.master')

@section('title') {{__('admin.dashboard')}} -@endsection
@section('css')
<link href="{{ asset('public/css/artist/autoptimize_0796f2a3114c.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<link href="{{ asset('public/css/artist/automix1.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<link href="{{ asset('public/css/artist/automix2.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Ballet&family=Cinzel:wght@400;700&family=Montserrat:wght@400;600;700&family=Playfair+Display:ital,wght@1,400;1,600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

    <style>
        body {
            background: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            gap: 40px;
        }

        .card-vip {
            width: 400px;
            height: 220px;
            border-radius: 15px;
            background: linear-gradient(135deg, #0b1530, #112244);
            color: #fff;
            padding: 20px;
            position: relative;
            box-shadow: 0px 6px 12px rgba(0,0,0,0.4);
        }

        /* FRONT */
        .front .vip {
            font-family: 'Cinzel', serif;
            font-size: 36px;
            font-weight: 700;
            color: gold;
        }
        .front .platinum {
            font-family: 'Ballet', cursive;
            font-size: 16px;
            margin-left: 5px;
        }
        .front .loyalty {
            font-family: 'Montserrat', sans-serif;
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 14px;
            letter-spacing: 2px;
        }
        .front .number {
            font-family: 'Montserrat', sans-serif;
            font-size: 22px;
            font-weight: 700;
            margin: 20px 0;
            position: absolute;
            bottom: 30%;
            right: 20px;
            
        }
        .front .name {
            font-family: 'Montserrat', sans-serif;
            font-size: 18px;
            font-weight: 600;
            position: absolute;
            bottom: 20px;
        }
        .front .class {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 18px;
        }
        .gold-line {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background: linear-gradient(
        180deg,
        #FFD700,
        #FFA500,
        #FFD700,
        #FFF8DC
    );
            transform: rotate(-10deg);
        }
        
        .gold-line2 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 180px;
    height: 100%;
    border-radius: 50%;
    border-right: none;   /* remove one side */
    border-bottom: none;  /* remove another side */
    transform: rotate(-15deg);

    /* Metallic gold gradient */
    border-image: linear-gradient(
        180deg,
        #FFD700,
        #FFA500,
        #FFD700,
        #FFF8DC
    ) 1;

    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

        /* BACK */
        .back {
            text-align: center;
            font-size: 12px;
            padding: 20px;
        }
        .back .black-bar {
            width: 100%;
            height: 30px;
            background: black;
            margin-bottom: 10px;
        }
        .back p {
            font-family: 'Roboto', sans-serif;
            font-size: 10px;
            line-height: 1.4;
        }
        .back .qr {
            margin: 15px auto;
            width: 60px;
            height: 60px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .back .company {
            margin-top: 15px;
            font-size: 11px;
            font-family: 'Roboto', sans-serif;
            opacity: 0.8;
        }
    </style>

@endsection
@section('content')

<section class="section section-sm">
    <div class="container-fluid">
        <div class="row mt-4">
            <div class="col-md-12 col-lg-12">
                <div class="main-body">
    <main class="bai-lists-page">
        <section class="bai_lists_index">
            <div class="bai_lists_index_header">
                <h1>Membership Card</h1>
        
            </div>

            <div class="bai_lists_empty d-flex flex-column align-items-center justify-content-center">
         <!-- FRONT -->
    <div id="card-front" class="card-vip front mb-4">
        <div class="d-flex align-items-end">
            <div class="vip">VIP</div>
            <div class="platinum">Platinum</div>
        </div>
        <div class="loyalty">LOYALTY CARD</div>
        <div class="number">{{ $number ?? '1234567' }}</div>
        <div class="name">{{ $user->full_name }}</div>
        <div class="class">{{$artist->name}}</div>
        <div class="gold-line"></div>
        <div class="gold-line2"></div>
    </div>

    <!-- BACK -->
    <div id="card-back" class="card-vip back mt-4">
        <div class="black-bar"></div>
        <p>This card is non-transferable and remains the property of {{__system_settings('site_name')}}.
It may only be used by the person whose name appears on the front.
<br/>
Lost or stolen cards should be reported immediately.</p>
        <div class="qr">
            {!! QrCode::size(80)->generate(__system_settings('site_base_url')) !!}
        </div>
        <div class="company">
            {{__system_settings('site_name')}}<br>
            {{__system_settings('site_url')}}
        </div>
    </div>

    <div class="mt-4 d-flex gap-3">
        <button class="btn btn-warning mx-3" onclick="downloadCard('card-front')">Download Front</button>
        <button class="btn btn-warning" onclick="downloadCard('card-back')">Download Back</button>
    </div>
            </div>
            
        </section>
    </main>
   
</div>

            </div>
        </div>
    </div>
  </section>
@endsection

@section('javascript')
  <!-- html2canvas -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        function downloadCard(id) {
            const card = document.getElementById(id);
            html2canvas(card).then(canvas => {
                let link = document.createElement('a');
                link.download = id + '.png';
                link.href = canvas.toDataURL();
                link.click();
            });
        }
    </script>
  @endsection