@extends('layout')

@section('header')
    @include('components.header-inner', ['title' => 'CFT Estimate'])
@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>

<div class="container">

    <!-- Available CFT Box -->
    <div class="cft-box">
        <div class="cft-value"><span>1,000</span> CFT</div>
        <button class="generate-btn" onclick="showTables()">Generate</button>
    </div>

    <!-- Tables Section (Hidden) -->
    <div id="tablesSection">

        <!-- Print Button -->
        <button class="print-btn" onclick="window.print()">Print</button>

        <!-- FIRST TABLE -->
        <div class="table-wrapper">
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>LENGTH</th>
                            <th>WIDTH</th>
                            <th>THICKNESS</th>
                            <th>NO OF PIECES</th>
                            <th>CFT</th>
                            <th>SQ FEET</th>
                            <th>PAEAKUM</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for($i=0;$i<10;$i++)
                        <tr>
                            <td>1</td>
                            <td>9</td>
                            <td>3</td>
                            <td>2</td>
                            <td>32</td>
                            <td>3.3</td>
                            <td>19.2</td>
                            <td>21</td>
                        </tr>
                        @endfor
                    </tbody>
                </table>
            </div>
        </div>

        <!-- SECOND TABLE -->
        <div class="table-wrapper">
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>LENGTH</th>
                            <th>WIDTH</th>
                            <th>THICKNESS</th>
                            <th>NO OF PIECES</th>
                            <th>CFT</th>
                            <th>SQ FEET</th>
                            <th>PAEAKUM</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for($i=0;$i<10;$i++)
                        <tr>
                            <td>1</td>
                            <td>9</td>
                            <td>3</td>
                            <td>2</td>
                            <td>32</td>
                            <td>3.3</td>
                            <td>19.2</td>
                            <td>21</td>
                        </tr>
                        @endfor
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

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

@endsection