{{-- ========================================================= --}}
{{-- SmartCBT Professional Calculator --}}
{{-- ========================================================= --}}

<div
    class="modal fade"
    id="calculatorModal"
    tabindex="-1"
    aria-hidden="true">

    <div
        class="modal-dialog modal-dialog-centered">

        <div
            class="modal-content calculator-card shadow-lg border-0">

            {{-- Header --}}
            <div
                class="modal-header calculator-header">

                <h5 class="modal-title">

                    <i class="bi bi-calculator-fill me-2"></i>

                    Scientific Calculator

                </h5>

                <button
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal">
                </button>

            </div>

            {{-- Display --}}
            <div class="calculator-display">

                <input
                    type="text"
                    id="calculator-screen"
                    class="form-control"
                    readonly>

            </div>

            {{-- Buttons --}}
            <div class="calculator-body">

                <div class="calculator-grid">

                    {{-- Row 1 --}}
                    <button class="btn btn-danger calc-btn" data-action="clear">C</button>

                    <button class="btn btn-warning calc-btn" data-action="backspace">
                        <i class="bi bi-backspace"></i>
                    </button>

                    <button class="btn btn-secondary calc-btn" data-value="(">(</button>

                    <button class="btn btn-secondary calc-btn" data-value=")">)</button>

                    {{-- Row 2 --}}
                    <button class="btn btn-light calc-btn" data-value="7">7</button>

                    <button class="btn btn-light calc-btn" data-value="8">8</button>

                    <button class="btn btn-light calc-btn" data-value="9">9</button>

                    <button class="btn btn-primary calc-btn" data-value="/">÷</button>

                    {{-- Row 3 --}}
                    <button class="btn btn-light calc-btn" data-value="4">4</button>

                    <button class="btn btn-light calc-btn" data-value="5">5</button>

                    <button class="btn btn-light calc-btn" data-value="6">6</button>

                    <button class="btn btn-primary calc-btn" data-value="*">×</button>

                    {{-- Row 4 --}}
                    <button class="btn btn-light calc-btn" data-value="1">1</button>

                    <button class="btn btn-light calc-btn" data-value="2">2</button>

                    <button class="btn btn-light calc-btn" data-value="3">3</button>

                    <button class="btn btn-primary calc-btn" data-value="-">−</button>

                    {{-- Row 5 --}}
                    <button class="btn btn-light calc-btn" data-value="0">0</button>

                    <button class="btn btn-light calc-btn" data-value=".">.</button>

                    <button class="btn btn-success calc-btn" data-action="equals">=</button>

                    <button class="btn btn-primary calc-btn" data-value="+">+</button>

                    {{-- Row 6 --}}
                    <button class="btn btn-info calc-btn" data-action="sqrt">√</button>

                    <button class="btn btn-info calc-btn" data-action="square">x²</button>

                    <button class="btn btn-info calc-btn" data-value="%">%</button>

                    <button class="btn btn-info calc-btn" data-action="power">xʸ</button>

                    {{-- Memory --}}
                    <button class="btn btn-dark calc-btn" data-action="mc">MC</button>

                    <button class="btn btn-dark calc-btn" data-action="mr">MR</button>

                    <button class="btn btn-dark calc-btn" data-action="mplus">M+</button>

                    <button class="btn btn-dark calc-btn" data-action="mminus">M-</button>

                </div>

            </div>

        </div>

    </div>

</div>

<style>

.calculator-card{

    border-radius:18px;

    overflow:hidden;

}

.calculator-header{

    background:#0d6efd;

    color:#fff;

}

.calculator-display{

    padding:20px;

    background:#f8f9fa;

}

#calculator-screen{

    font-size:2rem;

    text-align:right;

    font-weight:700;

    height:70px;

}

.calculator-body{

    padding:15px;

}

.calculator-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

}

.calc-btn{

    height:60px;

    font-size:1.2rem;

    font-weight:700;

    border-radius:12px;

}

.calc-btn:hover{

    transform:scale(1.03);

}

@media(max-width:768px){

    .calc-btn{

        height:55px;

        font-size:1rem;

    }

}

</style>