@extends('layouts.app')
@section('page-title', 'Fence & Gate Calculator')

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

.fence-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);
}

.fence-form .form-group { margin-bottom: 0; }
.fence-form .form-group label {
    display: block; margin-bottom: 6px; font-weight: 600;
    font-size: 0.88rem; color: #444;
}
.fence-form .form-group input,
.fence-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;
}
.fence-form .form-group input:focus,
.fence-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);
}
.fence-form .form-group small { display: block; margin-top: 4px; color: #888; font-size: 0.78rem; }

.fence-form .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.fence-form .form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }

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

.fence-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%;
}
.fence-submit:hover { background: var(--brand-primary-dark, #388E3C); transform: translateY(-1px); }

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

.fence-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;
}
.fence-card-header { padding: 16px 20px; border-bottom: 1px solid #eee; }
.fence-card-header h2 { margin: 0; font-size: 1.15rem; color: #333; }
.fence-card-body { padding: 20px; }

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

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

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

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

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

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

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

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

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

@section('content')
<div class="fence-page">
    <h1>Fence & Gate Calculator</h1>
    <p class="page-desc">Calculate materials for fence runs with optional gates. Supports closeboard, panel, and picket styles.</p>

    <form id="fenceForm" class="fence-form">
        <div class="form-grid">
            <div class="form-group">
                <label for="fenceRun">Total Run Length (m)</label>
                <input type="number" id="fenceRun" step="0.1" min="0.5" required placeholder="e.g. 12.0">
            </div>
            <div class="form-group">
                <label for="fenceType">Fence Type</label>
                <select id="fenceType">
                    <option value="closeboard">Closeboard / Featheredge</option>
                    <option value="panel">Panel Fencing</option>
                    <option value="picket">Picket Fencing</option>
                </select>
            </div>
            <div class="form-group">
                <label for="fenceHeight">Height</label>
                <select id="fenceHeight">
                    <option value="1.2">1.2m (4ft)</option>
                    <option value="1.5">1.5m (5ft)</option>
                    <option value="1.8" selected>1.8m (6ft)</option>
                    <option value="2.0">2.0m (6ft 6in)</option>
                </select>
            </div>
        </div>

        <div class="form-section">
            <h3>Gate Options</h3>
            <div class="form-grid">
                <div class="form-group">
                    <label for="gateCount">Number of Gates</label>
                    <select id="gateCount">
                        <option value="0">None</option>
                        <option value="1">1 Gate</option>
                        <option value="2">2 Gates</option>
                        <option value="3">3 Gates</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="gateWidth">Gate Width</label>
                    <select id="gateWidth">
                        <option value="0.9">900mm (3ft)</option>
                        <option value="1.2">1200mm (4ft)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="windExposure">Wind Exposure</label>
                    <select id="windExposure">
                        <option value="normal">Normal</option>
                        <option value="exposed">Exposed</option>
                    </select>
                    <small>Exposed: extra concrete per post</small>
                </div>
            </div>
        </div>

        <div class="form-section">
            <h3>End Conditions</h3>
            <div class="form-grid">
                <div class="form-group">
                    <label for="corners">Number of Corners</label>
                    <select id="corners">
                        <option value="0">0 (Straight run)</option>
                        <option value="1">1 Corner</option>
                        <option value="2">2 Corners</option>
                        <option value="3">3 Corners</option>
                    </select>
                </div>
            </div>
        </div>

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

    <div id="fenceResults" class="fence-results">
        <div class="fence-card fence-summary">
            <div class="fence-card-header"><h2>Fence Summary</h2></div>
            <div class="fence-card-body">
                <div class="fence-stat-grid" id="fenceStats"></div>
            </div>
        </div>

        <div class="fence-card">
            <div class="fence-card-header"><h2>Material List</h2></div>
            <div class="fence-card-body">
                <table class="fence-table">
                    <thead><tr><th>Item</th><th>Quantity</th><th>Size / Notes</th></tr></thead>
                    <tbody id="fenceMaterialTable"></tbody>
                </table>
            </div>
        </div>

        <div class="fence-card" id="gateCard" style="display:none">
            <div class="fence-card-header"><h2>Gate Materials</h2></div>
            <div class="fence-card-body">
                <table class="fence-table">
                    <thead><tr><th>Item</th><th>Quantity</th><th>Notes</th></tr></thead>
                    <tbody id="gateMaterialTable"></tbody>
                </table>
            </div>
        </div>

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

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

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

    function calculate() {
        const totalRun = getVal('fenceRun');
        const fenceType = getSel('fenceType');
        const height = getVal('fenceHeight');
        const gateCount = parseInt(getSel('gateCount'));
        const gateWidth = getVal('gateWidth');
        const windExposure = getSel('windExposure');
        const corners = parseInt(getSel('corners'));

        if (!totalRun) return;

        const totalGateWidth = gateCount * gateWidth;
        const fenceLength = totalRun - totalGateWidth;

        let posts = 0, panels = 0, boards = 0, rails = 0, gravelBoards = 0;
        let postSize = '100mm x 100mm';
        let bayWidth = 0;
        const materials = [];

        if (fenceType === 'panel') {
            bayWidth = 1.83; // 6ft panel
            panels = Math.ceil(fenceLength / bayWidth);
            posts = panels + 1 + corners;
            materials.push({ item: 'Fence Panels', qty: panels, note: `${bayWidth}m (6ft) × ${height}m high` });
            materials.push({ item: 'Fence Posts', qty: posts, note: `${postSize} × ${(height + 0.6).toFixed(1)}m (inc. 600mm embedment)` });
            materials.push({ item: 'Post Caps', qty: posts, note: postSize });
            if (height >= 1.8) {
                materials.push({ item: 'Gravel Boards', qty: panels, note: '1.83m (6ft) × 150mm' });
            }
        } else if (fenceType === 'closeboard') {
            bayWidth = 2.4; // closeboard bay
            const bays = Math.ceil(fenceLength / bayWidth);
            posts = bays + 1 + corners;
            const boardWidth = 0.125; // 125mm featheredge board
            const overlap = 0.025; // 25mm overlap
            const boardsPerBay = Math.ceil(bayWidth / (boardWidth - overlap));
            boards = boardsPerBay * bays;
            rails = (height > 1.5 ? 3 : 2) * bays;
            gravelBoards = bays;

            materials.push({ item: 'Featheredge Boards', qty: boards, note: `125mm × ${height}m` });
            materials.push({ item: 'Arris Rails', qty: rails, note: `75mm × 75mm × 2.4m (${height > 1.5 ? '3' : '2'} per bay)` });
            materials.push({ item: 'Gravel Boards', qty: gravelBoards, note: '2.4m × 150mm × 25mm' });
            materials.push({ item: 'Fence Posts', qty: posts, note: `${postSize} × ${(height + 0.6).toFixed(1)}m` });
            materials.push({ item: 'Post Caps', qty: posts, note: postSize });
        } else if (fenceType === 'picket') {
            bayWidth = 1.8;
            const bays = Math.ceil(fenceLength / bayWidth);
            posts = bays + 1 + corners;
            const picketWidth = 0.07; // 70mm
            const gap = 0.07; // 70mm gap
            const picketsPerBay = Math.ceil(bayWidth / (picketWidth + gap));
            boards = picketsPerBay * bays;
            rails = 2 * bays;

            materials.push({ item: 'Picket Pales', qty: boards, note: `70mm × 22mm × ${height}m` });
            materials.push({ item: 'Rails', qty: rails, note: '75mm × 38mm × 1.8m (2 per bay)' });
            materials.push({ item: 'Fence Posts', qty: posts, note: `${postSize} × ${(height + 0.6).toFixed(1)}m` });
            materials.push({ item: 'Post Caps', qty: posts, note: postSize });
        }

        // Build material table
        let tableHtml = materials.map(m => `<tr><td>${m.item}</td><td><strong>${m.qty}</strong></td><td>${m.note}</td></tr>`).join('');
        document.getElementById('fenceMaterialTable').innerHTML = tableHtml;

        // Gate materials
        const gateCard = document.getElementById('gateCard');
        if (gateCount > 0) {
            gateCard.style.display = '';
            const gatePosts = gateCount * 2;
            document.getElementById('gateMaterialTable').innerHTML = `
                <tr><td>Gate Posts</td><td><strong>${gatePosts}</strong></td><td>125mm × 125mm × ${(height + 0.6).toFixed(1)}m (heavier than fence posts)</td></tr>
                <tr><td>Gate Frames</td><td><strong>${gateCount}</strong></td><td>${(gateWidth * 1000).toFixed(0)}mm wide × ${height}m high</td></tr>
                <tr><td>T-Hinges (pairs)</td><td><strong>${gateCount}</strong></td><td>Heavy-duty galvanised</td></tr>
                <tr><td>Gate Latches</td><td><strong>${gateCount}</strong></td><td>Ring latch or auto-catch</td></tr>
                <tr><td>Diagonal Bracing</td><td><strong>${gateCount}</strong></td><td>One per gate frame</td></tr>
            `;
        } else {
            gateCard.style.display = 'none';
        }

        // Concrete & fixings
        const totalPosts = posts + (gateCount * 2);
        const bagsPerPost = windExposure === 'exposed' ? 2 : 1;
        const concreteBags = totalPosts * bagsPerPost;

        document.getElementById('fixingsTable').innerHTML = `
            <tr><td>Postcrete / Fast-set Concrete</td><td><strong>${concreteBags} bags</strong></td><td>${bagsPerPost} bag${bagsPerPost > 1 ? 's' : ''} per post (20kg bags)${windExposure === 'exposed' ? ' — exposed site' : ''}</td></tr>
            <tr><td>Total Posts (inc. gate posts)</td><td><strong>${totalPosts}</strong></td><td>${posts} fence + ${gateCount * 2} gate</td></tr>
            <tr><td>Galvanised Nails/Screws</td><td><strong>${Math.ceil(boards * 2 / 100)} boxes</strong></td><td>~2 fixings per board, 100 per box</td></tr>
        `;

        // Stats
        document.getElementById('fenceStats').innerHTML = `
            <div class="fence-stat"><div class="fence-stat-value">${totalRun}</div><div class="fence-stat-label">Total Run (m)</div></div>
            <div class="fence-stat"><div class="fence-stat-value">${fenceLength.toFixed(1)}</div><div class="fence-stat-label">Fence Length (m)</div></div>
            <div class="fence-stat"><div class="fence-stat-value">${totalPosts}</div><div class="fence-stat-label">Total Posts</div></div>
            <div class="fence-stat"><div class="fence-stat-value">${concreteBags}</div><div class="fence-stat-label">Concrete Bags</div></div>
            <div class="fence-stat"><div class="fence-stat-value">${gateCount}</div><div class="fence-stat-label">Gates</div></div>
        `;

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