@extends('User.layout')
<style>
    .crypto-modal {
        background: #0f172a;
        border: none;
        border-radius: 16px;
        color: white;
    }

    .crypto-success-animation {
        position: relative;
        width: 100px;
        height: 100px;
        margin: auto;
    }

    /* COIN */

    .coin {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(145deg, #facc15, #f59e0b);
        position: absolute;
        left: 10px;
        top: 10px;
        box-shadow: 0 0 20px rgba(255, 200, 0, 0.6);
        animation: coinSpin 1.5s ease forwards;
    }

    /* COIN SPIN */

    @keyframes coinSpin {

        0% {
            transform: rotateY(0deg) scale(1);
        }

        50% {
            transform: rotateY(720deg) scale(1.1);
        }

        80% {
            transform: rotateY(1080deg) scale(0.8);
            opacity: 0.8;
        }

        100% {
            transform: scale(0);
            opacity: 0;
        }

    }


    .checkmark {
        width: 80px;
        height: 80px;
        position: absolute;
        left: 10px;
        top: 10px;
        opacity: 0;
        transform: scale(0);
        animation: checkAppear 0.6s ease forwards;
        animation-delay: 1.4s;
    }

    .checkmark path {
        stroke: #22c55e;
        stroke-width: 5;
        fill: none;
        stroke-dasharray: 60;
        stroke-dashoffset: 60;
        animation: drawCheck 0.6s ease forwards;
        animation-delay: 1.6s;
    }

    /* CHECKMARK APPEAR */

    @keyframes checkAppear {

        0% {
            opacity: 0;
            transform: scale(0);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }

    }

    /* CHECK DRAW */

    @keyframes drawCheck {

        to {
            stroke-dashoffset: 0;
        }

    }

    .rosette {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid #22c55e;
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
        animation: ringAppear 0.5s ease forwards;
        animation-delay: 1.5s;
        opacity: 0;
    }

    @keyframes ringAppear {

        from {
            opacity: 0;
            transform: scale(0.5);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }

    }
</style>
@section('content')

    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('block') }}"> <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 d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Sell Block
            </h5>
        </div>
          <div class="col-auto">
                <a href="{{ route('sell_history') }}"><button class="btn btn-primary">History</button> </a>
            </div>

    </div>
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card p-3">
                <form action="#">
                    <div class="row">

                        <!-- Sell To -->
                        <div class="col-lg-12 mb-3">
                            <label class="form-label">
                                <i class="ti tabler-arrows-exchange text-warning me-1"></i>
                                Sell To
                            </label>
                            <select class="form-select" id="sellTo">
                                <option value="">Select</option>
                                <option value="Admin">Admin</option>
                                <option value="User">User</option>
                            </select>
                        </div>

                        <!-- USER FIELDS -->
                        <div id="userFields">

                            <div class="col-lg-12 mb-3">
                                <label class="form-label">
                                    <i class="ti tabler-id text-info me-1"></i>
                                    User ID
                                </label>
                                <input type="text" name="user_id" placeholder="Enter User ID" class="form-control">
                            </div>

                            <div class="col-lg-12 mb-3">
                                <label class="form-label">
                                    <i class="ti tabler-user text-success me-1"></i>
                                    User Name
                                </label>
                                <input type="text" name="user_name" placeholder="Enter User Name" class="form-control">
                            </div>

                        </div>

                        <!-- PRICE -->
                        <div class="col-lg-12 mb-3" id="priceField">
                            <label class="form-label">
                                <i class="ti tabler-currency-bitcoin text-warning me-1"></i>
                                Price
                            </label>
                            <input type="text" name="price" placeholder="Enter Price" class="form-control">
                        </div>

                    </div>


                    <div class="form-action d-flex justify-content-center gap-3 mt-4">

                        <button type="reset" class="btn btn-label-secondary">
                            <i class="ti tabler-x me-1"></i>
                            Discard
                        </button>

                        <button type="submit" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#cryptoSuccessModal">
                            <i class="ti tabler-check me-1"></i>
                            Submit
                        </button>

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

    <div class="modal fade" id="cryptoSuccessModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content crypto-modal">

                <div class="modal-body text-center p-5">

                    <div class="crypto-success-animation">

                        <!-- Coin -->
                        <div class="coin" id="coin"></div>

                        <!-- Checkmark -->
                        <div class="rosette"></div>
                        <svg class="checkmark" viewBox="0 0 52 52">
                            <path d="M14 27 L22 35 L38 18"></path>
                        </svg>

                    </div>

                    <h4 class="mt-4 fw-bold">Request Sent Successfully</h4>

                    <p class="text-muted">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, similique.
                    </p>

                    <button class="btn btn-primary mt-3" data-bs-dismiss="modal">
                        Ok
                    </button>

                </div>

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

            const sellTo = document.getElementById("sellTo");
            const userFields = document.getElementById("userFields");

            userFields.style.display = "none";

            sellTo.addEventListener("change", function () {

                if (this.value === "User") {
                    userFields.style.display = "block";
                } else if (this.value === "Admin") {
                    userFields.style.display = "none";
                } else {
                    userFields.style.display = "none";
                }

            });

        });
    </script>
@endsection