@extends('layouts.app')
@section('page-title', 'Cabinet Calculator')

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

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

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

/* Form Card */
.cabinet-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);
}

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

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

.cabinet-form .form-group input {
    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;
}

.cabinet-form .form-group input: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);
}

.cabinet-form .form-group small {
    display: block;
    margin-top: 4px;
    color: #888;
    font-size: 0.78rem;
}

/* Advanced Settings */
.cabinet-advanced {
    margin-top: 22px;
    border: 1px solid #eee;
    border-radius: var(--brand-border-radius, 6px);
    overflow: hidden;
}

.cabinet-advanced summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 16px;
    background: #fafafa;
    color: #555;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cabinet-advanced summary::-webkit-details-marker { display: none; }

.cabinet-advanced summary::before {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid #999;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.2s;
}

.cabinet-advanced[open] summary::before {
    transform: rotate(90deg);
}

.cabinet-advanced .advanced-body {
    padding: 16px 16px 4px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Submit Button */
.cabinet-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%;
}

.cabinet-submit:hover {
    background: var(--brand-primary-dark, #388E3C);
    transform: translateY(-1px);
}

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

.cabinet-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.cabinet-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.cabinet-section-header h2 {
    margin: 0;
    font-size: 1.15rem;
    color: #333;
}

.cabinet-section-body {
    padding: 20px;
}

.cabinet-note {
    color: #888;
    font-size: 0.85rem;
    margin: 0 0 16px 0;
}

/* Action Buttons */
.cabinet-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cabinet-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--brand-border-radius, 6px);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.cabinet-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.cabinet-btn-primary { background: var(--brand-primary, #4CAF50); color: #fff; }
.cabinet-btn-purple { background: #7c3aed; color: #fff; }
.cabinet-btn-teal { background: #0d9488; color: #fff; }

/* Cut List Summary */
.cabinet-summary {
    background: var(--brand-primary, #4CAF50);
    border-color: var(--brand-primary, #4CAF50);
}

.cabinet-summary .cabinet-section-header {
    border-bottom-color: rgba(255,255,255,0.15);
}

.cabinet-summary .cabinet-section-header h2 {
    color: #fff;
}

.cabinet-summary .cabinet-section-body {
    color: #fff;
}

.cabinet-summary #cutListSummary {
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    line-height: 1.8;
    color: #fff;
}

.cabinet-summary .cabinet-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Diagrams */
.cabinet-diagrams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.cabinet-diagram h3 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: #555;
}

.cabinet-diagram-box {
    border: 1px solid #e0e0e0;
    padding: 16px;
    background: #fff;
    border-radius: var(--brand-border-radius, 6px);
}

/* Error */
.cabinet-error {
    display: none;
    padding: 14px 18px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--brand-border-radius, 6px);
    color: #991b1b;
    margin-top: 20px;
    font-size: 0.9rem;
}

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

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

body.dark-mode .cabinet-form .form-group label { color: #ccc; }

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

body.dark-mode .cabinet-advanced {
    border-color: #404040;
}

body.dark-mode .cabinet-advanced summary {
    background: #333;
    color: #ccc;
}

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

body.dark-mode .cabinet-section-header {
    border-bottom-color: #404040;
}

body.dark-mode .cabinet-section-header h2 { color: #f0f0f0; }
body.dark-mode .cabinet-note { color: #888; }

body.dark-mode .cabinet-diagram h3 { color: #ccc; }

body.dark-mode .cabinet-diagram-box {
    background: #1e1e1e;
    border-color: #404040;
}

body.dark-mode .cabinet-error {
    background: #451a1a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* ===== Theme overrides ===== */
body.theme-forest .cabinet-form,
body.theme-forest .cabinet-section { background: #243020; border-color: #3d5235; }
body.theme-forest .cabinet-form .form-group label { color: #b8d4a8; }
body.theme-forest .cabinet-form .form-group input { background: #1a2418; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .cabinet-advanced { border-color: #3d5235; }
body.theme-forest .cabinet-advanced summary { background: #2a3825; color: #8aaa78; }
body.theme-forest .cabinet-section-header { border-bottom-color: #3d5235; }
body.theme-forest .cabinet-section-header h2 { color: #b8d4a8; }
body.theme-forest .cabinet-page h1 { color: #b8d4a8; }
body.theme-forest .cabinet-page .page-desc { color: #8aaa78; }
body.theme-forest .cabinet-diagram h3 { color: #8aaa78; }
body.theme-forest .cabinet-diagram-box { background: #1a2418; border-color: #3d5235; }

body.theme-ocean .cabinet-form,
body.theme-ocean .cabinet-section { background: #1c2636; border-color: #2e4460; }
body.theme-ocean .cabinet-form .form-group label { color: #a0c4e8; }
body.theme-ocean .cabinet-form .form-group input { background: #141e2e; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .cabinet-advanced { border-color: #2e4460; }
body.theme-ocean .cabinet-advanced summary { background: #1f2d40; color: #7a9ab8; }
body.theme-ocean .cabinet-section-header { border-bottom-color: #2e4460; }
body.theme-ocean .cabinet-section-header h2 { color: #a0c4e8; }
body.theme-ocean .cabinet-page h1 { color: #a0c4e8; }
body.theme-ocean .cabinet-page .page-desc { color: #7a9ab8; }
body.theme-ocean .cabinet-diagram h3 { color: #7a9ab8; }
body.theme-ocean .cabinet-diagram-box { background: #141e2e; border-color: #2e4460; }

body.theme-slate .cabinet-form,
body.theme-slate .cabinet-section { background: #faf7f2; border-color: #c8bfb0; }
body.theme-slate .cabinet-form .form-group label { color: #504840; }
body.theme-slate .cabinet-form .form-group input { background: #f5f0e8; border-color: #c8bfb0; color: #504840; }
body.theme-slate .cabinet-advanced { border-color: #c8bfb0; }
body.theme-slate .cabinet-advanced summary { background: #ebe5da; color: #8b7d6b; }
body.theme-slate .cabinet-section-header { border-bottom-color: #c8bfb0; }
body.theme-slate .cabinet-section-header h2 { color: #504840; }
body.theme-slate .cabinet-page h1 { color: #504840; }
body.theme-slate .cabinet-page .page-desc { color: #8b7d6b; }
body.theme-slate .cabinet-diagram h3 { color: #8b7d6b; }
body.theme-slate .cabinet-diagram-box { background: #f5f0e8; border-color: #c8bfb0; }

body.theme-sunset .cabinet-form,
body.theme-sunset .cabinet-section { background: #fff8f5; border-color: #e0bfb0; }
body.theme-sunset .cabinet-form .form-group label { color: #6b3f35; }
body.theme-sunset .cabinet-form .form-group input { background: #fdf5f0; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .cabinet-advanced { border-color: #e0bfb0; }
body.theme-sunset .cabinet-advanced summary { background: #faeee8; color: #a06858; }
body.theme-sunset .cabinet-section-header { border-bottom-color: #e0bfb0; }
body.theme-sunset .cabinet-section-header h2 { color: #6b3f35; }
body.theme-sunset .cabinet-page h1 { color: #6b3f35; }
body.theme-sunset .cabinet-page .page-desc { color: #a06858; }
body.theme-sunset .cabinet-diagram h3 { color: #a06858; }
body.theme-sunset .cabinet-diagram-box { background: #fdf5f0; border-color: #e0bfb0; }

/* Responsive */
@media (max-width: 640px) {
    .cabinet-form .form-grid { grid-template-columns: 1fr; }
    .cabinet-advanced .advanced-body { grid-template-columns: 1fr; }
    .cabinet-actions { flex-direction: column; }
    .cabinet-actions .cabinet-btn { justify-content: center; }
    .cabinet-diagrams { grid-template-columns: 1fr; }
}
</style>
@endpush

@section('content')
<div class="cabinet-page">
    <h1>Cabinet Calculator</h1>
    <p class="page-desc">Calculate materials for cabinet construction with customizable dimensions.</p>

    <form id="cabinetForm" class="cabinet-form">
        <div class="form-grid">
            <div class="form-group">
                <label for="height">Height (H) mm</label>
                <input type="number" id="height" name="height" required min="1" placeholder="e.g. 720">
            </div>
            <div class="form-group">
                <label for="width">Width (W) mm</label>
                <input type="number" id="width" name="width" required min="1" placeholder="e.g. 600">
            </div>
            <div class="form-group">
                <label for="depth">Depth (D) mm</label>
                <input type="number" id="depth" name="depth" required min="1" placeholder="e.g. 300">
            </div>
        </div>

        <details class="cabinet-advanced">
            <summary>Advanced Settings (Optional)</summary>
            <div class="advanced-body">
                <div class="form-group">
                    <label for="thickness">Material Thickness (T) mm</label>
                    <input type="number" id="thickness" name="thickness" value="18" min="1">
                    <small>Used to calculate sides height (H - 2&times;T)</small>
                </div>
                <div class="form-group">
                    <label for="doorGap">Door Gap (DG) mm</label>
                    <input type="number" id="doorGap" name="doorGap" value="6" min="0">
                    <small>Gap around door (H-DG, W-DG)</small>
                </div>
            </div>
        </details>

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

    <div id="resultsContainer" class="cabinet-results">
        {{-- Cut List Table --}}
        <div class="cabinet-section">
            <div class="cabinet-section-header">
                <h2>Cut List</h2>
                <div class="cabinet-actions">
                    <button type="button" id="printResultsBtn" class="cabinet-btn cabinet-btn-purple">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
                        Print
                    </button>
                    <button type="button" id="copyCsvBtn" class="cabinet-btn cabinet-btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                        Copy CSV
                    </button>
                    <button type="button" id="downloadCsvBtn" class="cabinet-btn cabinet-btn-teal">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        Download CSV
                    </button>
                </div>
            </div>
            <div class="cabinet-section-body">
                <p class="cabinet-note no-print"><strong>Note:</strong> You can edit any dimension in the table. Changes are reflected in CSV export.</p>
                <div id="cutListTable" class="no-print"></div>
            </div>
        </div>

        {{-- Cut List Summary --}}
        <div class="cabinet-section cabinet-summary">
            <div class="cabinet-section-header">
                <h2>Cut List Summary</h2>
                <button type="button" id="copySummaryBtn" class="cabinet-btn">Copy Summary</button>
            </div>
            <div class="cabinet-section-body">
                <div id="cutListSummary"></div>
            </div>
        </div>

        {{-- Diagrams --}}
        <div class="cabinet-section">
            <div class="cabinet-section-header">
                <h2>Diagrams</h2>
            </div>
            <div class="cabinet-section-body">
                <div class="cabinet-diagrams">
                    <div class="cabinet-diagram">
                        <h3>Front View</h3>
                        <div id="frontSvg" class="cabinet-diagram-box"></div>
                    </div>
                    <div class="cabinet-diagram">
                        <h3>Side View</h3>
                        <div id="sideSvg" class="cabinet-diagram-box"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="errorContainer" class="cabinet-error">
        <strong>Error:</strong> <span id="errorMessage"></span>
    </div>
</div>

@endsection

@push('page-scripts')
    @vite(['resources/js/tools/cabinet-calculator.js'])
@endpush