@extends('User.layout')

@section('content')

    <style>
        .gold-card {
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        }

        .gold-header {
            background: linear-gradient(135deg, #0A1F44, #1a1a1a);
            border-radius: 20px 20px 0 0;
        }

        .form-control,
        .form-select {
            border-radius: 12px;
            padding: 14px;
            border: 1px solid #e0e0e0;
            transition: 0.3s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #0A1F44;
            box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.15);
        }

        .input-label {
            font-weight: 600;
            margin-bottom: 6px;
        }

        .result-card {
            background: linear-gradient(145deg, #1a1a1a, #2c2c2c);
            color: #fff;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }

        .result-card::before {
            content: "";
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(201, 162, 39, 0.3), transparent);
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 15px;
            opacity: 0.9;
        }

        .total-price {
            font-size: 22px;
            font-weight: bold;
            color: #c9a227;
        }

        .btn-gold {
            background: linear-gradient(135deg, #0A1F44, #0A1F44);
            border: none;
            color: #fff;
            border-radius: 12px;
            transition: 0.3s;
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 768px) {
            .result-card {
                margin-top: 20px;
            }
        }
    </style>
    <h5><button type="button" class="btn btn-icon bg-white me-2 waves-effect waves-light"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('user.dashboard') }}">
                <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">
                    <path d="M15 6l-6 6l6 6"></path>
                </svg>
            </a>
        </button>Gold Calculator</h5>

    <div class="card gold-card">

        <div class="gold-header p-4">
            <h4 class="mb-0 text-white">Gold Price Calculator</h4>
            <small class="opacity-75 text-white">Calculate gold price with purity, GST & making charges</small>
        </div>

        <div class="card-body p-4">

            <div class="row g-4">

                <div class="col-lg-6 col-12">

                    <div class="mb-3">
                        <label class="input-label">Gold Rate (₹ / gram)</label>
                        <input type="number" class="form-control" placeholder="Eg: 6200">
                    </div>

                    <div class="mb-3">
                        <label class="input-label">Weight (grams)</label>
                        <input type="number" class="form-control" placeholder="Eg: 10">
                    </div>

                    <div class="mb-3">
                        <label class="input-label">Purity</label>
                        <select class="form-select">
                            <option>24K (99.9%)</option>
                            <option selected>22K (91.6%)</option>
                            <option>18K (75%)</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="input-label">Making Charges (%)</label>
                        <input type="number" class="form-control" placeholder="Eg: 10">
                    </div>

                    <div class="mb-3">
                        <label class="input-label">GST (%)</label>
                        <input type="number" class="form-control" value="3">
                    </div>

                </div>

                <div class="col-lg-6 col-12">

                    <div class="result-card p-4 h-100 d-flex flex-column justify-content-between">

                        <div>
                            <h5 class="mb-4 text-white text-center">Calculation Summary</h5>

                            <div class="result-item">
                                <span>Gold Value</span>
                                <strong>₹ 0.00</strong>
                            </div>

                            <div class="result-item">
                                <span>Making Charges</span>
                                <strong>₹ 0.00</strong>
                            </div>

                            <div class="result-item">
                                <span>GST</span>
                                <strong>₹ 0.00</strong>
                            </div>

                            <hr class="border-light">

                            <div class="d-flex justify-content-between align-items-center">
                                <span>Total Price</span>
                                <span class="total-price">₹ 0.00</span>
                            </div>
                        </div>

                        <button class="btn btn-gold w-100 mt-4 py-3 fw-bold">
                            Calculate Price
                        </button>

                    </div>

                </div>

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

@endsection