@extends('layouts.app')

@section('content')
<section class="py-5 calculator-form">
    <div class="container">
        <div class="text-center mb-4">
            <h1 class="fw-bold h2 text-black">Plywood Calculator</h1>
            <p class="mb-0 fs-14 text-secondary">Perform quick &amp; accurate conversions and calculations</p>
        </div>

        <div class="row plywood-width">
            <div class="col-lg-9">
                <div class="row gx-lg-3 g-4 align-items-center">
                    <div class="col-lg-7 col-sm-6">
                        <h2 class="fs-16 text-primary mb-3">Surface to Cover:</h2>
                        <div class="row gx-lg-4">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="coverLength" class="d-block mb-2 label-title fs-14">Length (L)</label>
                                    <div class="custom-input">
                                        <input type="number" class="form-control text-end" id="coverLength" placeholder="0">
                                        <select id="coverLengthUnit" class="border-start text-primary text-center">
                                            <option value="in">in</option>
                                            <option value="ft" selected>ft</option>
                                            <option value="yd">yd</option>
                                            <option value="cm">cm</option>
                                            <option value="m">m</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="coverWidth" class="d-block mb-2 label-title fs-14">Width (W)</label>
                                    <div class="custom-input">
                                        <input type="number" class="form-control text-end" id="coverWidth" placeholder="0">
                                        <select id="coverWidthUnit" class="border-start text-primary text-center">
                                            <option value="in">in</option>
                                            <option value="ft" selected>ft</option>
                                            <option value="yd">yd</option>
                                            <option value="cm">cm</option>
                                            <option value="m">m</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="fs-16 text-primary mt-4 mb-3 fw-medium">Single Plywood Sheet:</div>
                        <div class="row gx-lg-4 gy-4">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="plywoodLength" class="d-block mb-2 label-title fs-14">Length (L):</label>
                                    <div class="custom-input">
                                        <input type="number" class="form-control text-end" id="plywoodLength" placeholder="0">
                                        <select id="plywoodLengthUnit" class="border-start text-primary text-center">
                                            <option value="in">in</option>
                                            <option value="ft" selected>ft</option>
                                            <option value="yd">yd</option>
                                            <option value="cm">cm</option>
                                            <option value="m">m</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="plywoodWidth" class="d-block mb-2 label-title fs-14">Width (W)</label>
                                    <div class="custom-input">
                                        <input type="number" class="form-control text-end" id="plywoodWidth" placeholder="0">
                                        <select id="plywoodWidthUnit" class="border-start text-primary text-center">
                                            <option value="in">in</option>
                                            <option value="ft" selected>ft</option>
                                            <option value="yd">yd</option>
                                            <option value="cm">cm</option>
                                            <option value="m">m</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="form-group">
                                    <label for="plywoodPrice" class="d-block mb-2 label-title fs-14">Price (per sheet)</label>
                                    <div class="custom-input">
                                        <input type="number" class="form-control text-end" id="plywoodPrice" placeholder="0">
                                    </div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="mt-4 ms-lg-5 ps-lg-2">
                                    <button type="button" class="btn btn-primary calculate-btn" onclick="calculatePlywood()">Calculate</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Result Section -->
                    <div class="col-lg-5 col-sm-5 col-10 d-flex align-items-center">
                        <div class="ms-xl-5 ms-sm-4">
                            <div class="d-flex justify-content-between mb-3 plywood-ryt-item">
                                <span class="cost-title-font">Total Area <small>(sq ft):</small></span>
                                <h4 class="fw-bold mb-0 ms-5" id="totalArea">0.00</h4>
                            </div>
                            <div class="d-flex justify-content-between mb-3 plywood-ryt-item">
                                <span class="cost-title-font">No. of Plywood:</span>
                                <h4 id="numSheets" class="board-total-cost ms-5 text-black fw-bold mb-0">0</h4>
                            </div>
                            <div class="d-flex justify-content-between plywood-ryt-item">
                                <span class="cost-title-font">Total Cost:</span>
                                <h4 id="totalCost" class="board-total-cost fw-bold ms-5 text-primary mb-0">₹0.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- You can keep your FAQ / info section below unchanged --}}
    </div>
</section>

<script>
    // Conversion factors to feet
    const toFeet = {
        in: 1/12,
        ft: 1,
        yd: 3,
        cm: 0.0328084,
        m: 3.28084
    };

    function calculatePlywood() {
        let L = parseFloat(document.getElementById("coverLength").value) || 0;
        let W = parseFloat(document.getElementById("coverWidth").value) || 0;
        let LU = document.getElementById("coverLengthUnit").value;
        let WU = document.getElementById("coverWidthUnit").value;

        let sheetL = parseFloat(document.getElementById("plywoodLength").value) || 0;
        let sheetW = parseFloat(document.getElementById("plywoodWidth").value) || 0;
        let sheetLU = document.getElementById("plywoodLengthUnit").value;
        let sheetWU = document.getElementById("plywoodWidthUnit").value;

        let price = parseFloat(document.getElementById("plywoodPrice").value) || 0;

        // Convert all dimensions to feet
        L = L * toFeet[LU];
        W = W * toFeet[WU];
        sheetL = sheetL * toFeet[sheetLU];
        sheetW = sheetW * toFeet[sheetWU];

        let totalArea = L * W; // in sq ft
        let sheetArea = sheetL * sheetW; // in sq ft

        let sheetsNeeded = sheetArea > 0 ? Math.ceil(totalArea / sheetArea) : 0;
        let totalCost = sheetsNeeded * price;

        // Update UI
        document.getElementById("totalArea").innerText = totalArea.toFixed(2);
        document.getElementById("numSheets").innerText = sheetsNeeded;
        document.getElementById("totalCost").innerText = "₹" + totalCost.toFixed(2);
    }
</script>
@endsection