@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('user.deposit_history', $batch)}}"> <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 Unit
        </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="{{route('unit_sell')}}" method="post" id="sellForm">
                @csrf
                <input type="hidden" name="invest_id" value="{{ $investment->id }}">
                <div class="row">

                    <div class="col-lg-12 mb-3">
                        <label class="form-label">
                            Sell To
                        </label>
                        <select class="form-select" id="sellTo" name="sell_to">
                            <option value="">Select</option>
                            <option value="Company" {{ old('sell_to') == 'Company' ? 'selected' : '' }}>Company</option>
                            <option value="User" {{ old('sell_to') == 'User' ? 'selected' : '' }}>User</option>
                        </select>
                        @error('sell_to')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror

                    </div>

                    <div id="dynamicFields" style="display:none;">

                        <div class="col-lg-12 mb-3 d-none" id="companyPercentageField">
                            <label class="form-label">Company Percentage</label>
                            <input type="text" name="company_percentage" value="{{ $percentage }}" class="form-control bg-light" readonly>
                        </div>

                        <div class="col-lg-12 mb-3 d-none" id="userIdField">
                            <label class="form-label">User ID</label>
                            <input type="text" name="user_id" id="user_id" value="{{ old('user_id') }}" class="form-control">

                            @error('user_id')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror

                        </div>

                        <div class="col-lg-12 mb-3 d-none" id="userNameField">
                            <label class="form-label">User Name

                            </label>
                            <input type="text" name="user_name" id="user_name" value="{{ old('user_name') }}" class="form-control">

                        </div>

                        <div class="col-lg-12 mb-3" id="unitPriceField">
                            <label class="form-label">Unit Price</label>
                            <input type="text" name="unit_price" value="{{ old('unit_price', $unitPrice) }}" class="form-control" readonly>
                        </div>

                        <div class="col-lg-12 mb-3" id="sellingPriceField">
                            <label class="form-label">Selling Price</label>
                            <input type="text" name="selling_price" value="{{ $sellingPrice }}" class="form-control">
                            @error('selling_price')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror

                        </div>

                    </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" id="submit_btn" class="btn btn-primary" data-bs-toggle="modal">
                        <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">
                    <div class="coin" id="coin"></div>
                    <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">
                    The sell request has been successfully submitted and will be processed shortly. </p>

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

            </div>

        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const users = @json($users);

    $(document).on('input', '#user_id', function() {

        let enteredId = $(this).val().trim().toLowerCase();

        let user = users.find(u =>
            u.user_id.toLowerCase() === enteredId
        );

        if (enteredId === '') {
            $('#user_name')
                .val('')
                .removeClass('text-danger');
            return;
        }

        if (user) {
            $('#user_name')
                .val(user.name)
                .removeClass('text-danger');
        } else {
            $('#user_name')
                .val('User not found')
                .addClass('text-danger');
        }
    });
</script>

<script>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('sellForm').submit();
    });
</script>

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

        const sellTo = document.getElementById("sellTo");
        const wrapper = document.getElementById("dynamicFields");

        const companyField = document.getElementById("companyPercentageField");
        const userIdField = document.getElementById("userIdField");
        const userNameField = document.getElementById("userNameField");

        const unitPrice = document.querySelector('[name="unit_price"]');
        const sellingPrice = document.querySelector('[name="selling_price"]');
        const userName = document.querySelector('[name="user_name"]');

        function showFields(value) {

            if (!value) {
                wrapper.style.display = "none";
                return;
            }

            wrapper.style.display = "block";

            companyField.classList.add("d-none");
            userIdField.classList.add("d-none");
            userNameField.classList.add("d-none");

            [unitPrice, sellingPrice, userName].forEach(el => {
                if (el) {
                    el.removeAttribute("readonly");
                    el.classList.remove("bg-light");
                }
            });

            if (value === "Company") {
                companyField.classList.remove("d-none");

                let unit = parseFloat(unitPrice.value) || 0;
                let percentage = parseFloat(document.querySelector('[name="company_percentage"]').value) || 0;

                let calculated = unit * percentage / 100;
                sellingPrice.value = calculated.toFixed(2);

                unitPrice.setAttribute("readonly", true);
                unitPrice.classList.add("bg-light");

                sellingPrice.setAttribute("readonly", true);
                sellingPrice.classList.add("bg-light");
            } else if (value === "User") {
                userIdField.classList.remove("d-none");
                userNameField.classList.remove("d-none");

                userName.setAttribute("readonly", true);
                userName.classList.add("bg-light");

                unitPrice.setAttribute("readonly", true);
                unitPrice.classList.add("bg-light");

                sellingPrice.value = '';

                sellingPrice.removeAttribute("readonly");
                sellingPrice.classList.remove("bg-light");
            }
        }

        sellTo.addEventListener("change", function() {
            showFields(this.value);
        });

        showFields(sellTo.value);
    });
</script>

@if(session('success'))
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var successModal = new bootstrap.Modal(document.getElementById('cryptoSuccessModal'));
        successModal.show();
    });
</script>
@endif


@endsection