@extends('layouts.app')
@section('page-title', 'Area Estimator')

@push('page-css')
<style>
/* Area Estimator */
.area-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px;
}

.area-page h1 {
    font-size: 1.6rem;
    margin: 0 0 6px 0;
    color: #333;
}

.area-page .page-desc {
    color: #666;
    font-size: 0.92rem;
    margin: 0 0 24px 0;
}

/* Form Card */
.area-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    padding: 28px 24px;
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.area-form fieldset {
    border: 1px solid #eee;
    border-radius: var(--brand-border-radius, 6px);
    padding: 16px;
    margin: 0 0 16px 0;
}

.area-form fieldset:last-of-type {
    margin-bottom: 0;
}

.area-form legend {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--brand-primary, #4CAF50);
    padding: 0 8px;
}

.area-form .form-group {
    margin-bottom: 12px;
}

.area-form .form-group:last-child {
    margin-bottom: 0;
}

.area-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: #444;
}

.area-form .form-group input,
.area-form .form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: var(--brand-border-radius, 6px);
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}

.area-form .form-group input:focus,
.area-form .form-group select:focus {
    outline: none;
    border-color: var(--brand-primary, #4CAF50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4CAF50) 15%, transparent);
}

.area-form .dimensions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Results Card */
.area-results {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.area-results h2 {
    margin: 0 0 16px 0;
    font-size: 1.15rem;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.area-output {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--brand-primary, #4CAF50);
    padding: 12px 0;
}

.area-detail {
    text-align: center;
    color: #555;
    font-size: 0.95rem;
    margin: 4px 0;
}

.area-rate-note {
    color: #888;
    font-size: 0.85rem;
    text-align: center;
    margin: 12px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* ===== Dark Mode ===== */
body.dark-mode .area-page h1 { color: #f0f0f0; }
body.dark-mode .area-page .page-desc { color: #aaa; }

body.dark-mode .area-form {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .area-form fieldset { border-color: #404040; }
body.dark-mode .area-form legend { color: var(--brand-primary, #4CAF50); }
body.dark-mode .area-form .form-group label { color: #ccc; }

body.dark-mode .area-form .form-group input,
body.dark-mode .area-form .form-group select {
    background: #1e1e1e;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .area-results {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .area-results h2 {
    color: #f0f0f0;
    border-bottom-color: #404040;
}

body.dark-mode .area-detail { color: #bbb; }
body.dark-mode .area-rate-note { color: #888; border-top-color: #404040; }

/* ===== Theme overrides ===== */
body.theme-forest .area-form,
body.theme-forest .area-results { background: #243020; border-color: #3d5235; }
body.theme-forest .area-form fieldset { border-color: #3d5235; }
body.theme-forest .area-form .form-group label { color: #b8d4a8; }
body.theme-forest .area-form .form-group input,
body.theme-forest .area-form .form-group select { background: #1a2418; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .area-results h2 { color: #b8d4a8; border-bottom-color: #3d5235; }
body.theme-forest .area-page h1 { color: #b8d4a8; }
body.theme-forest .area-page .page-desc { color: #8aaa78; }
body.theme-forest .area-detail { color: #8aaa78; }
body.theme-forest .area-rate-note { color: #8aaa78; border-top-color: #3d5235; }

body.theme-ocean .area-form,
body.theme-ocean .area-results { background: #1c2636; border-color: #2e4460; }
body.theme-ocean .area-form fieldset { border-color: #2e4460; }
body.theme-ocean .area-form .form-group label { color: #a0c4e8; }
body.theme-ocean .area-form .form-group input,
body.theme-ocean .area-form .form-group select { background: #141e2e; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .area-results h2 { color: #a0c4e8; border-bottom-color: #2e4460; }
body.theme-ocean .area-page h1 { color: #a0c4e8; }
body.theme-ocean .area-page .page-desc { color: #7a9ab8; }
body.theme-ocean .area-detail { color: #7a9ab8; }
body.theme-ocean .area-rate-note { color: #7a9ab8; border-top-color: #2e4460; }

body.theme-slate .area-form,
body.theme-slate .area-results { background: #faf7f2; border-color: #c8bfb0; }
body.theme-slate .area-form fieldset { border-color: #c8bfb0; }
body.theme-slate .area-form .form-group label { color: #504840; }
body.theme-slate .area-form .form-group input,
body.theme-slate .area-form .form-group select { background: #f5f0e8; border-color: #c8bfb0; color: #504840; }
body.theme-slate .area-results h2 { color: #504840; border-bottom-color: #c8bfb0; }
body.theme-slate .area-page h1 { color: #504840; }
body.theme-slate .area-page .page-desc { color: #8b7d6b; }
body.theme-slate .area-detail { color: #8b7d6b; }
body.theme-slate .area-rate-note { color: #8b7d6b; border-top-color: #c8bfb0; }

body.theme-sunset .area-form,
body.theme-sunset .area-results { background: #fff8f5; border-color: #e0bfb0; }
body.theme-sunset .area-form fieldset { border-color: #e0bfb0; }
body.theme-sunset .area-form .form-group label { color: #6b3f35; }
body.theme-sunset .area-form .form-group input,
body.theme-sunset .area-form .form-group select { background: #fdf5f0; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .area-results h2 { color: #6b3f35; border-bottom-color: #e0bfb0; }
body.theme-sunset .area-page h1 { color: #6b3f35; }
body.theme-sunset .area-page .page-desc { color: #a06858; }
body.theme-sunset .area-detail { color: #a06858; }
body.theme-sunset .area-rate-note { color: #a06858; border-top-color: #e0bfb0; }

/* Responsive */
@media (max-width: 640px) {
    .area-form .dimensions-row { grid-template-columns: 1fr; }
}
</style>
@endpush

@section('content')
<div class="area-page">
    <h1>Deck Area Estimator</h1>
    <p class="page-desc">Calculate deck area and estimate labour costs based on material type and rate.</p>

    <div class="area-form">
        <fieldset>
            <legend>Square Metres</legend>
            <div class="form-group">
                <label for="sqm">Area in m&sup2;</label>
                <input type="number" id="sqm" step="0.1" oninput="calculateLabour()" placeholder="e.g. 24.5">
            </div>
        </fieldset>

        <fieldset>
            <legend>Or Enter Dimensions</legend>
            <div class="dimensions-row">
                <div class="form-group">
                    <label for="length">Length (m or mm)</label>
                    <input type="number" id="length" oninput="calculateLabour()" placeholder="e.g. 6000">
                </div>
                <div class="form-group">
                    <label for="width">Width (m or mm)</label>
                    <input type="number" id="width" oninput="calculateLabour()" placeholder="e.g. 4000">
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend>Material &amp; Rate</legend>
            <div class="dimensions-row">
                <div class="form-group">
                    <label for="material">Material Type</label>
                    <select id="material" onchange="calculateLabour()">
                        <option value="timber">Timber</option>
                        <option value="composite">Composite</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="customRate">Custom Rate (&pound; per m&sup2;)</label>
                    <input type="number" id="customRate" step="0.1" placeholder="Leave blank for default" oninput="calculateLabour()">
                </div>
            </div>
        </fieldset>
    </div>

    <div class="area-results">
        <h2>Result</h2>
        <div class="area-output" id="result">Enter area or dimensions above</div>
        <p class="area-detail" id="area"></p>
        <p class="area-rate-note" id="defaultRate"></p>
    </div>
</div>
@endsection

@push('page-scripts')
<script>
    function calculateLabour() {
        const material = document.getElementById("material").value;
        const customRate = parseFloat(document.getElementById("customRate").value);

        const defaultRates = {
            timber: 100,
            composite: 120
        };

        const defaultRate = defaultRates[material];
        const rate = customRate > 0 ? customRate : defaultRate;

        let length = parseFloat(document.getElementById("length").value) || 0;
        let width = parseFloat(document.getElementById("width").value) || 0;
        const sqmInput = parseFloat(document.getElementById("sqm").value) || 0;

        if (length > 100) length /= 1000;
        if (width > 100) width /= 1000;

        const area = (length > 0 && width > 0) ? (length * width) : sqmInput;
        const total = rate * area;

        document.getElementById("area").textContent = area > 0
            ? `Total Area: ${area.toFixed(2)} m\u00B2`
            : '';
        document.getElementById("result").textContent = area > 0
            ? `Labour Cost: \u00A3${total.toFixed(2)}`
            : 'Enter area or dimensions above';
        document.getElementById("defaultRate").textContent = `Default Rate for ${material.charAt(0).toUpperCase() + material.slice(1)}: \u00A3${defaultRate.toFixed(2)} per m\u00B2`;
    }
</script>
@endpush