@extends('layouts.app')
@section('page-title', 'Pergola & Gazebo Estimator')

@push('page-css')
<style>
/* Pergola Estimator */
.pergola-page { max-width: 960px; margin: 0 auto; padding: 24px 20px; }
.pergola-page h1 { font-size: 1.6rem; margin: 0 0 6px 0; color: #333; }
.pergola-page .page-desc { color: #666; font-size: 0.92rem; margin: 0 0 24px 0; }

.pergola-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);
}
.pergola-form .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.pergola-form .form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.pergola-form .form-group label {
    display: block; margin-bottom: 6px; font-weight: 600;
    font-size: 0.88rem; color: #444;
}
.pergola-form .form-group input,
.pergola-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;
}
.pergola-form .form-group input:focus,
.pergola-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);
}
.pergola-form .form-group small { display: block; margin-top: 4px; color: #888; font-size: 0.78rem; }

.pergola-form .form-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.pergola-form .form-section h3 { margin: 0 0 16px; font-size: 0.95rem; color: #555; }

.pergola-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pergola-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-primary, #4CAF50); }
.pergola-check label { font-weight: 600; font-size: 0.88rem; color: #444; margin: 0; }

.pergola-submit {
    margin-top: 24px; padding: 12px 32px;
    background: var(--brand-primary, #4CAF50); color: #fff; border: none;
    border-radius: var(--brand-border-radius, 6px);
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s, transform 0.15s; width: 100%;
}
.pergola-submit:hover { background: var(--brand-primary-dark, #388E3C); transform: translateY(-1px); }

/* Results */
.pergola-results { display: none; }

.pergola-card {
    background: #fff; border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
}
.pergola-card-header { padding: 16px 20px; border-bottom: 1px solid #eee; }
.pergola-card-header h2 { margin: 0; font-size: 1.15rem; color: #333; }
.pergola-card-body { padding: 20px; }

.pergola-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.pergola-stat { text-align: center; padding: 16px; background: #f8f9fa; border-radius: var(--brand-border-radius, 6px); }
.pergola-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--brand-primary, #4CAF50); line-height: 1.2; }
.pergola-stat-label { font-size: 0.82rem; color: #666; margin-top: 4px; }

.pergola-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pergola-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #eee; color: #555; font-weight: 600; }
.pergola-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #333; }
.pergola-table tr:last-child td { border-bottom: none; }

/* Summary card */
.pergola-summary { background: var(--brand-primary, #4CAF50); border-color: var(--brand-primary, #4CAF50); }
.pergola-summary .pergola-card-header { border-bottom-color: rgba(255,255,255,0.15); }
.pergola-summary .pergola-card-header h2 { color: #fff; }
.pergola-summary .pergola-card-body { color: #fff; }
.pergola-summary .pergola-stat { background: rgba(255,255,255,0.15); }
.pergola-summary .pergola-stat-value { color: #fff; }
.pergola-summary .pergola-stat-label { color: rgba(255,255,255,0.8); }

/* ===== Dark Mode ===== */
body.dark-mode .pergola-page h1 { color: #f0f0f0; }
body.dark-mode .pergola-page .page-desc { color: #aaa; }
body.dark-mode .pergola-form { background: #2d2d2d; border-color: #404040; }
body.dark-mode .pergola-form .form-group label { color: #ccc; }
body.dark-mode .pergola-form .form-group input,
body.dark-mode .pergola-form .form-group select { background: #1e1e1e; border-color: #505050; color: #e0e0e0; }
body.dark-mode .pergola-form .form-section { border-top-color: #404040; }
body.dark-mode .pergola-form .form-section h3 { color: #ccc; }
body.dark-mode .pergola-check label { color: #ccc; }
body.dark-mode .pergola-card { background: #2d2d2d; border-color: #404040; }
body.dark-mode .pergola-card-header { border-bottom-color: #404040; }
body.dark-mode .pergola-card-header h2 { color: #f0f0f0; }
body.dark-mode .pergola-stat { background: #383838; }
body.dark-mode .pergola-table th { color: #ccc; border-bottom-color: #404040; }
body.dark-mode .pergola-table td { color: #ddd; border-bottom-color: #383838; }

/* ===== Theme overrides ===== */
body.theme-forest .pergola-form, body.theme-forest .pergola-card { background: #243020; border-color: #3d5235; }
body.theme-forest .pergola-form .form-group label, body.theme-forest .pergola-check label { color: #b8d4a8; }
body.theme-forest .pergola-form .form-group input, body.theme-forest .pergola-form .form-group select { background: #1a2418; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .pergola-form .form-section { border-top-color: #3d5235; }
body.theme-forest .pergola-form .form-section h3 { color: #8aaa78; }
body.theme-forest .pergola-card-header { border-bottom-color: #3d5235; }
body.theme-forest .pergola-card-header h2 { color: #b8d4a8; }
body.theme-forest .pergola-page h1 { color: #b8d4a8; }
body.theme-forest .pergola-page .page-desc { color: #8aaa78; }
body.theme-forest .pergola-stat { background: #1a2418; }
body.theme-forest .pergola-table th { color: #8aaa78; }
body.theme-forest .pergola-table td { color: #b8d4a8; }

body.theme-ocean .pergola-form, body.theme-ocean .pergola-card { background: #1c2636; border-color: #2e4460; }
body.theme-ocean .pergola-form .form-group label, body.theme-ocean .pergola-check label { color: #a0c4e8; }
body.theme-ocean .pergola-form .form-group input, body.theme-ocean .pergola-form .form-group select { background: #141e2e; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .pergola-form .form-section { border-top-color: #2e4460; }
body.theme-ocean .pergola-form .form-section h3 { color: #7a9ab8; }
body.theme-ocean .pergola-card-header { border-bottom-color: #2e4460; }
body.theme-ocean .pergola-card-header h2 { color: #a0c4e8; }
body.theme-ocean .pergola-page h1 { color: #a0c4e8; }
body.theme-ocean .pergola-page .page-desc { color: #7a9ab8; }
body.theme-ocean .pergola-stat { background: #141e2e; }
body.theme-ocean .pergola-table th { color: #7a9ab8; }
body.theme-ocean .pergola-table td { color: #a0c4e8; }

body.theme-slate .pergola-form, body.theme-slate .pergola-card { background: #faf7f2; border-color: #c8bfb0; }
body.theme-slate .pergola-form .form-group label, body.theme-slate .pergola-check label { color: #504840; }
body.theme-slate .pergola-form .form-group input, body.theme-slate .pergola-form .form-group select { background: #f5f0e8; border-color: #c8bfb0; color: #504840; }
body.theme-slate .pergola-form .form-section { border-top-color: #c8bfb0; }
body.theme-slate .pergola-form .form-section h3 { color: #8b7d6b; }
body.theme-slate .pergola-card-header { border-bottom-color: #c8bfb0; }
body.theme-slate .pergola-card-header h2 { color: #504840; }
body.theme-slate .pergola-page h1 { color: #504840; }
body.theme-slate .pergola-page .page-desc { color: #8b7d6b; }
body.theme-slate .pergola-stat { background: #f5f0e8; }
body.theme-slate .pergola-table th { color: #8b7d6b; }
body.theme-slate .pergola-table td { color: #504840; }

body.theme-sunset .pergola-form, body.theme-sunset .pergola-card { background: #fff8f5; border-color: #e0bfb0; }
body.theme-sunset .pergola-form .form-group label, body.theme-sunset .pergola-check label { color: #6b3f35; }
body.theme-sunset .pergola-form .form-group input, body.theme-sunset .pergola-form .form-group select { background: #fdf5f0; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .pergola-form .form-section { border-top-color: #e0bfb0; }
body.theme-sunset .pergola-form .form-section h3 { color: #a06858; }
body.theme-sunset .pergola-card-header { border-bottom-color: #e0bfb0; }
body.theme-sunset .pergola-card-header h2 { color: #6b3f35; }
body.theme-sunset .pergola-page h1 { color: #6b3f35; }
body.theme-sunset .pergola-page .page-desc { color: #a06858; }
body.theme-sunset .pergola-stat { background: #fdf5f0; }
body.theme-sunset .pergola-table th { color: #a06858; }
body.theme-sunset .pergola-table td { color: #6b3f35; }

@media (max-width: 640px) {
    .pergola-form .form-grid { grid-template-columns: 1fr; }
    .pergola-form .form-grid-2 { grid-template-columns: 1fr; }
    .pergola-stat-grid { grid-template-columns: 1fr 1fr; }
}
</style>
@endpush

@section('content')
<div class="pergola-page">
    <h1>Pergola & Gazebo Estimator</h1>
    <p class="page-desc">Estimate materials for freestanding or attached pergolas and gazebos.</p>

    <form id="pergolaForm" class="pergola-form">
        <div class="form-grid">
            <div class="form-group">
                <label for="structureType">Structure Type</label>
                <select id="structureType">
                    <option value="pergola">Pergola (Rectangular)</option>
                    <option value="gazebo-rect">Gazebo (Rectangular)</option>
                    <option value="gazebo-hex">Gazebo (Hexagonal)</option>
                </select>
            </div>
            <div class="form-group">
                <label for="postType">Post Size</label>
                <select id="postType">
                    <option value="100">100mm × 100mm</option>
                    <option value="125" selected>125mm × 125mm</option>
                    <option value="150">150mm × 150mm</option>
                </select>
            </div>
            <div class="form-group">
                <label for="rafterSpacing">Rafter Spacing</label>
                <select id="rafterSpacing">
                    <option value="400">400mm</option>
                    <option value="600" selected>600mm</option>
                </select>
            </div>
        </div>

        <div class="form-grid">
            <div class="form-group">
                <label for="pergolaWidth">Width (mm)</label>
                <input type="number" id="pergolaWidth" min="1000" required placeholder="e.g. 3600">
                <small>Side-to-side</small>
            </div>
            <div class="form-group">
                <label for="pergolaDepth">Depth (mm)</label>
                <input type="number" id="pergolaDepth" min="1000" required placeholder="e.g. 2400">
                <small>Front-to-back</small>
            </div>
            <div class="form-group">
                <label for="pergolaHeight">Height (mm)</label>
                <input type="number" id="pergolaHeight" min="2000" required placeholder="e.g. 2400">
                <small>Post height above ground</small>
            </div>
        </div>

        <div class="form-section">
            <h3>Options</h3>
            <div class="pergola-check">
                <input type="checkbox" id="crossBracing">
                <label for="crossBracing">Include diagonal cross-bracing</label>
            </div>
            <div class="pergola-check">
                <input type="checkbox" id="purlins">
                <label for="purlins">Include purlins (perpendicular to rafters)</label>
            </div>
        </div>

        <button type="submit" class="pergola-submit">Calculate</button>
    </form>

    <div id="pergolaResults" class="pergola-results">
        <div class="pergola-card pergola-summary">
            <div class="pergola-card-header"><h2>Structure Summary</h2></div>
            <div class="pergola-card-body">
                <div class="pergola-stat-grid" id="pergolaStats"></div>
            </div>
        </div>

        <div class="pergola-card">
            <div class="pergola-card-header"><h2>Timber List</h2></div>
            <div class="pergola-card-body">
                <table class="pergola-table">
                    <thead><tr><th>Item</th><th>Qty</th><th>Size</th></tr></thead>
                    <tbody id="timberTable"></tbody>
                </table>
            </div>
        </div>

        <div class="pergola-card">
            <div class="pergola-card-header"><h2>Foundations & Fixings</h2></div>
            <div class="pergola-card-body">
                <table class="pergola-table">
                    <thead><tr><th>Item</th><th>Qty</th><th>Notes</th></tr></thead>
                    <tbody id="fixingsTable"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page-scripts')
<script>
(function() {
    document.getElementById('pergolaForm').addEventListener('submit', function(e) {
        e.preventDefault();
        calculate();
    });

    function getVal(id) { return parseFloat(document.getElementById(id).value) || 0; }

    function calculate() {
        const type = document.getElementById('structureType').value;
        const postSize = document.getElementById('postType').value;
        const rafterSpacing = getVal('rafterSpacing');
        const width = getVal('pergolaWidth');
        const depth = getVal('pergolaDepth');
        const height = getVal('pergolaHeight');
        const crossBracing = document.getElementById('crossBracing').checked;
        const withPurlins = document.getElementById('purlins').checked;

        if (!width || !depth || !height) return;

        const postLength = height + 600; // 600mm embedment
        let numPosts, numBeams, beamLength;

        if (type === 'gazebo-hex') {
            numPosts = 6;
            numBeams = 6; // perimeter beams
            beamLength = width; // approximate side length
        } else {
            numPosts = 4; // rectangular
            numBeams = 2; // width-spanning beams
            beamLength = width;
        }

        // Rafters span the depth direction
        const numRafters = Math.ceil(width / rafterSpacing) + 1;
        const rafterLength = depth + 200; // 100mm overhang each end

        // Purlins (perpendicular to rafters)
        let numPurlins = 0;
        let purlinLength = 0;
        if (withPurlins) {
            numPurlins = Math.ceil(depth / rafterSpacing) + 1;
            purlinLength = width + 200;
        }

        // Cross-bracing: 4 diagonal braces
        let numBraces = 0, braceLength = 0;
        if (crossBracing) {
            numBraces = type === 'gazebo-hex' ? 6 : 4;
            braceLength = Math.ceil(Math.sqrt(450 * 450 + 450 * 450)); // ~636mm
        }

        // Concrete per post: 450mm cube footing = 0.091m³
        const concretePerPost = 0.091;
        const totalConcrete = numPosts * concretePerPost;

        // Fixings
        const postBeamBolts = numPosts * 2;
        const rafterBeamBolts = numRafters * numBeams; // 1 per rafter-beam junction

        // Beam size (wider than rafters)
        const beamSize = postSize >= 150 ? '150mm × 75mm' : (postSize >= 125 ? '125mm × 75mm' : '100mm × 50mm');
        const rafterSize = postSize >= 150 ? '150mm × 50mm' : (postSize >= 125 ? '125mm × 50mm' : '100mm × 50mm');

        // Stats
        const area = (width / 1000) * (depth / 1000);
        document.getElementById('pergolaStats').innerHTML = `
            <div class="pergola-stat"><div class="pergola-stat-value">${(width / 1000).toFixed(1)}m × ${(depth / 1000).toFixed(1)}m</div><div class="pergola-stat-label">Footprint</div></div>
            <div class="pergola-stat"><div class="pergola-stat-value">${area.toFixed(1)}</div><div class="pergola-stat-label">Area (m²)</div></div>
            <div class="pergola-stat"><div class="pergola-stat-value">${numPosts}</div><div class="pergola-stat-label">Posts</div></div>
            <div class="pergola-stat"><div class="pergola-stat-value">${numRafters}</div><div class="pergola-stat-label">Rafters</div></div>
            <div class="pergola-stat"><div class="pergola-stat-value">${(height / 1000).toFixed(1)}m</div><div class="pergola-stat-label">Height</div></div>
        `;

        // Timber table
        let timberHtml = `
            <tr><td>Posts</td><td><strong>${numPosts}</strong></td><td>${postSize}mm × ${postSize}mm × ${postLength}mm (inc. 600mm embedment)</td></tr>
            <tr><td>Beams</td><td><strong>${numBeams}</strong></td><td>${beamSize} × ${beamLength}mm</td></tr>
            <tr><td>Rafters</td><td><strong>${numRafters}</strong></td><td>${rafterSize} × ${rafterLength}mm (inc. 200mm overhang)</td></tr>
        `;
        if (withPurlins) {
            timberHtml += `<tr><td>Purlins</td><td><strong>${numPurlins}</strong></td><td>${rafterSize} × ${purlinLength}mm</td></tr>`;
        }
        if (crossBracing) {
            timberHtml += `<tr><td>Cross-braces</td><td><strong>${numBraces}</strong></td><td>${postSize >= 125 ? '75mm × 50mm' : '50mm × 50mm'} × ${braceLength}mm</td></tr>`;
        }
        document.getElementById('timberTable').innerHTML = timberHtml;

        // Fixings table
        const concreteBags = Math.ceil(totalConcrete / 0.012);
        document.getElementById('fixingsTable').innerHTML = `
            <tr><td>Concrete (post footings)</td><td><strong>${totalConcrete.toFixed(3)} m³</strong></td><td>450mm cube per post (${concreteBags} × 25kg bags)</td></tr>
            <tr><td>Coach Bolts (post-beam)</td><td><strong>${postBeamBolts}</strong></td><td>M12 × 200mm galvanised</td></tr>
            <tr><td>Joist Hangers or Bolts (rafter-beam)</td><td><strong>${rafterBeamBolts}</strong></td><td>1 per rafter-beam connection</td></tr>
            <tr><td>Post Anchors (optional)</td><td><strong>${numPosts}</strong></td><td>Galvanised bolt-down if not embedding</td></tr>
        `;

        document.getElementById('pergolaResults').style.display = 'block';
        document.getElementById('pergolaResults').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
})();
</script>
@endpush