@extends('layouts.master')
@section('content')
    <style>
        .subscription-card{
            transition: all .25s ease;
            border-radius: 14px;
        }

        .subscription-card:hover{
            transform: translateY(-6px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        }

        .icon-box{
            width:60px;
            height:60px;
            margin:auto;
            border-radius:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:22px;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-xxl">
            <div class="card mb-4 shadow-sm border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <h5 class="mb-0 fw-bold text-primary text-capitalize">Subscriptions</h5>

                        {{--<button class="btn btn-primary btn-sm shadow-sm text-capitalize"--}}
                                {{--data-bs-toggle="modal"--}}
                                {{--data-bs-target="#openmodal">--}}
                            {{--<i class="fa fa-plus me-1"></i> Add Subscription--}}
                        {{--</button>--}}
                </div>
            </div>
            <div class="row g-4 px-3 pb-4">

                {{-- ADVANCE --}}
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100 subscription-card">
                        <div class="card-body text-center">
                            <div class="icon-box bg-primary-subtle text-primary mb-3">
                                <i class="fas fa-wallet"></i>
                            </div>
                            <h6 class="text-muted mb-1">Advance Payment</h6>
                            <h3 class="fw-bold text-dark mb-0">
                                Rs {{ number_format($subscription->advance ?? 0) }}
                            </h3>
                            <small class="text-muted">Initial subscription fee</small>
                        </div>
                    </div>
                </div>

                {{-- SUBSCRIPTION AMOUNT --}}
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100 subscription-card">
                        <div class="card-body text-center">
                            <div class="icon-box bg-success-subtle text-success mb-3">
                                <i class="fas fa-receipt"></i>
                            </div>

                            <h6 class="text-muted mb-1">Subscription Amount</h6>

                            <h3 class="fw-bold text-dark mb-0">
                                Rs {{ number_format($subscription->amount ?? 0) }}
                            </h3>

                            <small class="text-muted">Yearly / Renewal charge</small>
                        </div>
                    </div>
                </div>

                {{-- FINE --}}
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100 subscription-card">
                        <div class="card-body text-center">
                            <div class="icon-box bg-danger-subtle text-danger mb-3">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>

                            <h6 class="text-muted mb-1">Late Fine</h6>

                            <h3 class="fw-bold text-dark mb-0">
                                Rs {{ number_format($subscription->fine ?? 0) }}
                            </h3>

                            <small class="text-muted">Applied after expiry</small>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="openmodal" data-bs-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
                <form class="modal-content" method="POST" action="">
                @csrf
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white text-capitalize">Add Promo</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Name -->
                        <div class="col-md-6">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Enter full name" required>
                        </div>
                        <!-- Email -->
                        <div class="col-md-6">
                            <label>Description</label>
                            <input type="text" class="form-control" name="description" placeholder="Enter Promo Description">
                        </div>
                        <!-- Password -->
                        <div class="col-md-6">
                            <label>Discount</label>
                            <input type="number" class="form-control" name="discount" placeholder="Enter Promo Discount" required>
                        </div>
                        <!-- Contact Number -->
                        <div class="col-md-6">
                            <label>Till Date</label>
                            <input type="date" class="form-control" name="tilldate" required>
                        </div>
                        <!-- City -->
                        <div class="col-md-12">
                            <label>Banner</label>
                            <input type="file" class="form-control" name="banner" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary text-capitalize">
                        <i class="fa fa-save me-1"></i> Save
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection