@extends('User.layout')

@section('header')
@include('components.header-inner', ['title' => 'CFT Estimate',
'backUrl' => route('welcome'),
])
@endsection

@section('content')

<style>
    .cft-box {
        text-align: center;
        margin: 20px auto;
        padding: 30px 20px;
        background: #fff;
        max-width: 350px;
        width: 100%;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .cft-value {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .cft-value span {
        color: #33B02C;
    }

    .generate-btn {
        background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%);
        border: none;
        padding: 12px 30px;
        width: 140px;
        color: #fff;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }

    .generate-btn:hover {
        opacity: .9;
    }

    .table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .table-container {
        min-width: 700px;
        margin-top: 30px;
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
        font-size: 13px;
    }

    thead th {
        background: #f3f3f3;
        padding: 10px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 11px;
        white-space: nowrap;
        border-bottom: 1px solid #ddd;
    }

    tbody tr {
        background: #fafafa;
    }

    tbody td {
        padding: 8px;
        white-space: nowrap;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    .print-btn {
        float: right;
        margin-bottom: 15px;
        padding: 8px 20px;
        background: #ddd;
        border-radius: 8px;
        font-size: 13px;
        cursor: pointer;
        border: none;
    }

    /* Hidden initially */
    #tablesSection {
        display: none;
        animation: fadeIn 0.4s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .cft-value {
            font-size: 32px;
        }

        .generate-btn {
            width: 100%;
        }

        .print-btn {
            float: none;
            width: 100%;
            margin-top: 10px;
        }

        .table-container {
            padding: 15px;
        }

        table {
            font-size: 12px;
        }
    }

    @media (max-width: 480px) {
        .cft-box {
            padding: 20px 15px;
        }

        .cft-value {
            font-size: 26px;
        }

        thead th,
        tbody td {
            padding: 6px;
            font-size: 11px;
        }
    }
</style>
<h4 class="mt-5">Available CFT</h4>
<hr>
<div class="container">

    <!-- Available CFT Box -->
    <div class="cft-box">
        <div class="cft-value">
            <span>{{ number_format($totalCFT, 2)  }}</span> CFT
        </div>
        <a href="{{ route('cft_list') }}" class="generate-btn text-decoration-none mt-5">View</a>
    </div>

</div>

<script>
    function showTables() {
        document.getElementById('tablesSection').style.display = 'block';
        window.scrollTo({
            top: document.getElementById('tablesSection').offsetTop - 50,
            behavior: 'smooth'
        });
    }
</script>

@endsection