@extends('layouts.admin')

@section('title', '宿舍管理')

@push('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">宿舍管理</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/dormitories.css') }}">
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-12">
            <h1><i class="bi bi-house-door-fill me-3"></i>宿舍管理</h1>
            <form method="GET" action="{{ route('dormitories.index') }}" class="d-flex gap-2 mt-3 search-inline">
                <input type="text"
                       name="keyword"
                       class="form-control search-input-wide"
                       placeholder="搜尋宿舍地址或入住工人..."
                       value="{{ old('keyword', $keyword) }}">
                <button type="submit" class="btn btn-light text-nowrap">
                    <i class="bi bi-search me-1"></i>搜尋
                </button>
                @if($keyword)
                    <a href="{{ route('dormitories.index') }}" class="btn btn-outline-light text-nowrap">
                        <i class="bi bi-x-circle"></i>
                    </a>
                @endif
            </form>
        </div>
    </div>
</div>

<div class="row">
    <!-- Left Column: Add Dormitory Form -->
    <div class="col-md-4 mb-4">
        <div class="add-form-card">
            <div class="card-header">
                <i class="bi bi-plus-circle me-2"></i>新增宿舍
            </div>
            <div class="card-body" style="padding: 1.25rem;">
                <form method="POST" action="{{ route('dormitories.store') }}">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-bold">
                            <i class="bi bi-geo-alt text-danger me-2"></i>詳細地址
                        </label>
                        <input type="text"
                               class="form-control"
                               name="address"
                               placeholder="例如：金華街33號7樓"
                               required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">
                            <i class="bi bi-gender-ambiguous text-info me-2"></i>性別限制
                        </label>
                        <select class="form-select" name="gender_limit">
                            <option value="不限">不限</option>
                            <option value="男">只限男性</option>
                            <option value="女">只限女性</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">
                            <i class="bi bi-building text-primary me-2"></i>代理公司
                        </label>
                        <select class="form-select" name="agency_company">
                            <option value="">-- 未指定 --</option>
                            @foreach(\App\Models\Dormitory::AGENCY_COMPANIES as $agency)
                                <option value="{{ $agency }}">{{ $agency }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">房東代理公司（康德美／信義人力資源），宿舍卡片按此分色</div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">
                            <i class="bi bi-people text-success me-2"></i>總容量 (床位數)
                        </label>
                        <input type="number"
                               class="form-control"
                               name="capacity"
                               min="1"
                               value="4"
                               required>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">
                            <i class="bi bi-cash-coin text-warning me-2"></i>月租（支出）
                        </label>
                        <input type="number"
                               step="0.01"
                               min="0"
                               class="form-control"
                               name="monthly_rent"
                               placeholder="例如：8000">
                        <div class="form-text">公司付給業主的宿舍月租，會計頁可每月再改</div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">
                            <i class="bi bi-cash-stack text-success me-2"></i>月租（收入）
                        </label>
                        <input type="number"
                               step="0.01"
                               min="0"
                               class="form-control"
                               name="monthly_rent_income"
                               placeholder="例如：3600">
                        <div class="form-text">此宿舍每月收取的租金收入，會計頁可每月再改</div>
                    </div>

                    <button type="submit" class="btn btn-success btn-lg w-100">
                        <i class="bi bi-check-circle me-2"></i>新增宿舍
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Right Column: Dormitory List -->
    <div class="col-md-8">
        <div class="row">
            @forelse ($dormitories as $dorm)
                @php
                    $workers = $dorm->workers ?? collect();
                    $maleWorkers = $workers->where('gender', '男')->values();
                    $femaleWorkers = $workers->where('gender', '女')->values();
                    $maleCount = $maleWorkers->count();
                    $femaleCount = $femaleWorkers->count();
                    $occupied = $workers->count();
                    $capacity = (int) $dorm->capacity;
                    $available = $capacity - $occupied;
                    $showMale = $dorm->gender_limit !== '女';
                    $showFemale = $dorm->gender_limit !== '男';
                    $isMixedOccupancy = $maleCount > 0 && $femaleCount > 0;

                    // 代理公司分色（康德美＝藍，信義＝綠，未指定＝灰）— 以宿舍設定的代理公司為準，與入住工人無關
                    $companyLabel = $dorm->agency_company ?: '未指定代理公司';
                    $companyClass = match (true) {
                        str_contains((string) $dorm->agency_company, '康德美') => 'company-kangdemei',
                        str_contains((string) $dorm->agency_company, '信義') => 'company-xinyi',
                        default => 'company-none',
                    };

                    // 已收租金收據（所有年月，卡片上顯示最新年的統計；popup 內按年查）
                    $paidPeriods = $dorm->rentExpenses
                        ->sortBy([['year', 'desc'], ['month', 'desc']])
                        ->map(fn ($e) => ['year' => $e->year, 'month' => $e->month, 'amount' => $e->amount, 'note' => $e->note]);
                    $paidThisYear = $paidPeriods->where('year', now()->year);
                @endphp
                <div class="col-md-6">
                    <div class="dorm-card {{ $companyClass }}">
                        <div class="card-header">
                            {{-- 第一行：左側信息，右側租金和按鈕 --}}
                            <div class="row-1">
                                <div class="row-1-left">
                                    <div class="row-1-top">
                                        <div class="gender-icons">
                                            @if($showMale)
                                                <i class="bi bi-gender-male" style="color: #36b9cc;"></i>
                                            @endif
                                            @if($showFemale)
                                                <i class="bi bi-gender-female" style="color: #e83e8c;"></i>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="dorm-address">
                                        <i class="bi bi-geo-alt"></i>{{ $dorm->address }}
                                    </div>
                                    <div class="dorm-company mt-1">
                                        <span class="badge dorm-company-badge {{ $companyClass }}">
                                            <i class="bi bi-building me-1"></i>{{ $companyLabel }}
                                        </span>
                                        @if($paidThisYear->isNotEmpty())
                                            <span class="badge bg-success rent-receipt-trigger ms-1"
                                                  data-bs-toggle="modal"
                                                  data-bs-target="#rentReceiptModal"
                                                  data-dorm-id="{{ $dorm->id }}"
                                                  data-dorm-address="{{ $dorm->address }}"
                                                  data-dorm-company="{{ $companyLabel }}"
                                                  role="button"
                                                  title="查看／編輯收租月曆">
                                                <i class="bi bi-receipt me-1"></i>今年已收 {{ $paidThisYear->count() }} 個月
                                            </span>
                                        @else
                                            <span class="badge rent-receipt-trigger text-bg-light border ms-1"
                                                  data-bs-toggle="modal"
                                                  data-bs-target="#rentReceiptModal"
                                                  data-dorm-id="{{ $dorm->id }}"
                                                  data-dorm-address="{{ $dorm->address }}"
                                                  data-dorm-company="{{ $companyLabel }}"
                                                  role="button"
                                                  title="記錄收租月份">
                                                <i class="bi bi-receipt me-1"></i>收租記錄
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="row-1-right">
                                    @if($dorm->monthly_rent !== null)
                                        <span class="rent-info">
                                            <i class="bi bi-cash-coin me-1"></i>租金: ${{ number_format($dorm->monthly_rent, 2) }}
                                        </span>
                                    @else
                                        <span class="rent-info unset">
                                            <i class="bi bi-dash-circle me-1"></i>未定
                                        </span>
                                    @endif
                                    <div class="action-buttons">
                                        <a href="{{ route('dormitories.edit', $dorm->id) }}" class="btn btn-outline-primary btn-sm" title="編輯">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        @if(auth()->user()->isAdmin())
                                        <form action="{{ route('dormitories.destroy', $dorm->id) }}"
                                              method="POST"
                                              onsubmit="return confirm('確定要刪除這間宿舍嗎？');"
                                              style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger btn-sm">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- 第二行：左側 Pie Chart + 人數，右側姓名列表 --}}
                            <div class="row-2">
                                <div class="row-2-left">
                                    <div class="chart-wrap">
                                        <canvas id="dormGenderChart{{ $dorm->id }}"
                                                data-male="{{ $showMale ? $maleCount : 0 }}"
                                                data-female="{{ $showFemale ? $femaleCount : 0 }}"
                                                data-occupied="{{ $occupied }}"
                                                data-capacity="{{ $capacity }}"
                                                width="80"
                                                height="80"></canvas>
                                    </div>
                                    <div class="chart-stats">
                                        @if($showMale)
                                        <div class="stat-item">
                                            <span class="stat-label male">男</span>
                                            <span class="stat-value male">{{ $maleCount }}</span>
                                        </div>
                                        @endif
                                        @if($showFemale)
                                        <div class="stat-item">
                                            <span class="stat-label female">女</span>
                                            <span class="stat-value female">{{ $femaleCount }}</span>
                                        </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="row-2-right">
                                    @if($showMale && $showFemale && $isMixedOccupancy)
                                        <div class="worker-names split">
                                            @if($occupied === 0)
                                                <div class="worker-name text-muted worker-names-empty">尚無入住</div>
                                            @else
                                                <div class="worker-col male-col">
                                                    @foreach($maleWorkers as $worker)
                                                        <div class="worker-name male"><a href="{{ route('workers.show', $worker->id) }}" class="worker-name-link">{{ $worker->zh_name ?: '（未填姓名）' }}</a></div>
                                                    @endforeach
                                                </div>
                                                <div class="worker-col female-col">
                                                    @foreach($femaleWorkers as $worker)
                                                        <div class="worker-name female"><a href="{{ route('workers.show', $worker->id) }}" class="worker-name-link">{{ $worker->zh_name ?: '（未填姓名）' }}</a></div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    @else
                                        <div class="worker-names double">
                                            @if($occupied === 0)
                                                <div class="worker-name text-muted worker-names-empty">尚無入住</div>
                                            @else
                                        @foreach($workers as $worker)
                                            <div class="worker-name {{ $worker->gender === '女' ? 'female' : 'male' }}"><a href="{{ route('workers.show', $worker->id) }}" class="worker-name-link">{{ $worker->zh_name ?: '（未填姓名）' }}</a></div>
                                        @endforeach
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="card" style="border-radius: 1rem; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                        <div class="card-body empty-state">
                            <i class="bi bi-house-x"></i>
                            <h4 class="text-muted">目前尚未建立宿舍資料</h4>
                            <p class="text-muted">請從左側表單新增宿舍</p>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const chartDefaults = {
        type: 'doughnut',
        options: {
            responsive: true,
            maintainAspectRatio: true,
            cutout: '58%',
            animation: {
                animateRotate: true,
                animateScale: true,
                duration: 1000,
                easing: 'easeOutQuart'
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function (ctx) {
                            const total = ctx.dataset.data.reduce((a, b) => a + b, 0) || 1;
                            const value = ctx.raw || 0;
                            const pct = Math.round((value / total) * 100);
                            return ` ${ctx.label}: ${value}（${pct}%）`;
                        }
                    }
                }
            }
        }
    };

    document.querySelectorAll('[id^="dormGenderChart"]').forEach(function (canvas) {
        const male = Number(canvas.dataset.male) || 0;
        const female = Number(canvas.dataset.female) || 0;
        const occupied = Number(canvas.dataset.occupied) || 0;
        const capacity = Number(canvas.dataset.capacity) || 0;
        const empty = male + female === 0;

        new Chart(canvas, {
            ...chartDefaults,
            data: {
                labels: empty ? ['尚無入住'] : ['男', '女'].filter((_, i) => [male, female][i] > 0),
                datasets: [{
                    data: empty ? [1] : [male, female].filter(v => v > 0),
                    backgroundColor: empty
                        ? ['#e9ecef']
                        : ['#36b9cc', '#e83e8c'].filter((_, i) => [male, female][i] > 0),
                    borderWidth: 2,
                    borderColor: '#fff',
                    hoverOffset: 3
                }]
            },
            plugins: [{
                id: 'centerText',
                afterDraw(chartInstance) {
                    const { ctx, chartArea } = chartInstance;
                    if (!chartArea) return;
                    const x = (chartArea.left + chartArea.right) / 2;
                    const y = (chartArea.top + chartArea.bottom) / 2;
                    ctx.save();
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillStyle = '#343a40';
                    ctx.font = '700 0.65rem Noto Sans TC, sans-serif';
                    ctx.fillText(occupied + '/' + capacity, x, y);
                    ctx.restore();
                }
            }]
        });
    });
});

// ---------- 租金收據 popup（年月曆） ----------
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('rentReceiptModal');
    if (!modalEl) return;

    const modal = new bootstrap.Modal(modalEl);
    let currentDormId = null;
    let currentYear = new Date().getFullYear();

    const yearSelect = document.getElementById('rentReceiptYear');
    const summaryEl = document.getElementById('rentReceiptSummary');
    const gridEl = document.getElementById('rentReceiptGrid');
    const editorEl = document.getElementById('rentReceiptEditor');
    const editorTitle = document.getElementById('rentReceiptEditorTitle');
    const editorAmount = document.getElementById('rentReceiptAmount');
    const editorNote = document.getElementById('rentReceiptNote');
    const editorSave = document.getElementById('rentReceiptSave');
    const editorClear = document.getElementById('rentReceiptClear');
    let editingMonth = null;
    let currentData = {};

    // 年份選單：今年 + 過去 3 年，預設今年（不顯示未來年份）
    (function initYears() {
        const nowYear = new Date().getFullYear();
        currentYear = nowYear;
        let options = '';
        for (let y = nowYear; y >= nowYear - 3; y--) {
            options += '<option value="' + y + '"' + (y === currentYear ? ' selected' : '') + '>' + y + '</option>';
        }
        yearSelect.innerHTML = options;
    })();

    function monthLabel(m) {
        return ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'][m - 1];
    }

    async function loadYear() {
        if (!currentDormId) return;

        gridEl.innerHTML = '<div class="text-center py-4"><div class="spinner-border spinner-border-sm text-primary"></div></div>';
        editorEl.classList.add('d-none');

        try {
            const url = '/dormitories/' + currentDormId + '/rent-receipts?year=' + currentYear;
            const resp = await fetch(url, { credentials: 'same-origin', headers: { 'Accept': 'application/json' } });
            if (!resp.ok) throw new Error('HTTP ' + resp.status);
            currentData = await resp.json();
        } catch (e) {
            gridEl.innerHTML = '<div class="text-danger text-center py-3">載入失敗，請重試。</div>';
            return;
        }

        summaryEl.innerHTML = '<i class="bi bi-check-circle-fill text-success me-1"></i>已收 <strong>' + currentData.paid_count + '</strong> 個月 · ' + (currentYear) + ' 年';

        let html = '<div class="row g-2">';
        for (let m = 1; m <= 12; m++) {
            // 後端回傳布林（true=已收）；兼容舊格式的金額數字
            const paid = currentData.months[m] === true || (currentData.months[m] && currentData.months[m] !== false);
            html += '<div class="col-3 col-md-2">' +
                        '<button type="button" class="btn w-100 rent-month-btn ' + (paid ? 'btn-success' : 'btn-outline-secondary') + '"' +
                            ' data-month="' + m + '"' +
                            ' title="' + (paid ? '已收（點擊取消）' : '未收（點擊標記已收）') + '">' +
                            '<div class="fw-bold small">' + monthLabel(m) + '</div>' +
                            '<div class="small">' + (paid ? '✓ 已收' : '未收') + '</div>' +
                        '</button>' +
                    '</div>';
        }
        html += '</div>';
        gridEl.innerHTML = html;
    }

    gridEl.addEventListener('click', function (event) {
        const btn = event.target.closest('.rent-month-btn');
        if (!btn) return;

        editingMonth = Number(btn.dataset.month);
        editorTitle.textContent = currentYear + ' 年 ' + monthLabel(editingMonth);
        editorEl.classList.remove('d-none');
    });

    async function saveReceipt(clear) {
        const payload = {
            year: currentYear,
            month: editingMonth,
            set: !clear,
            note: editorNote.value,
        };

        try {
            const resp = await fetch('/dormitories/' + currentDormId + '/rent-receipts', {
                method: 'PUT',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                },
                body: JSON.stringify(payload),
            });
            const result = await resp.json().catch(() => null);
            if (!resp.ok || !result || result.status !== true) {
                alert((result && result.message) || '儲存失敗（HTTP ' + resp.status + '），請重試。');
                return;
            }
            editorEl.classList.add('d-none');
            await loadYear();
        } catch (e) {
            alert('儲存失敗，請重試。');
        }
    }

    editorSave.addEventListener('click', function () { saveReceipt(false); });
    editorClear.addEventListener('click', function () { saveReceipt(true); });
    yearSelect.addEventListener('change', function () {
        currentYear = Number(yearSelect.value);
        loadYear();
    });

    modalEl.addEventListener('show.bs.modal', function (event) {
        const card = event.relatedTarget;
        if (!card) return;

        currentDormId = card.dataset.dormId;
        document.getElementById('rentReceiptAddress').textContent = card.dataset.dormAddress || '';
        document.getElementById('rentReceiptCompany').textContent = card.dataset.dormCompany || '';
        loadYear();
    });
});
</script>
@endpush

@push('styles')
<style>
.dorm-clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.dorm-clickable:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.14); }
.dorm-company-badge.company-kangdemei { background: #0d6efd; color: #fff; }
.dorm-company-badge.company-xinyi { background: #198754; color: #fff; }
.dorm-company-badge.company-none { background: #adb5bd; color: #fff; }
.dorm-card.company-kangdemei { border-top: 4px solid #0d6efd; }
.dorm-card.company-xinyi { border-top: 4px solid #198754; }

.rent-month-btn { padding: 0.5rem 0.25rem; line-height: 1.3; }
.rent-month-btn.btn-success { border-color: #198754; }
</style>
@endpush

@once
@push('scripts')
<div class="modal fade" id="rentReceiptModal" tabindex="-1" aria-labelledby="rentReceiptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h5 class="modal-title fs-6" id="rentReceiptModalLabel">
                    <i class="bi bi-receipt me-1"></i>已收租金收據
                    <span class="text-muted small ms-2" id="rentReceiptAddress"></span>
                </h5>
                <div class="d-flex align-items-center gap-2 ms-auto me-3">
                    <label class="small text-muted">年份</label>
                    <select id="rentReceiptYear" class="form-select form-select-sm" style="width: auto;"></select>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <span class="small text-muted"><i class="bi bi-building me-1"></i><span id="rentReceiptCompany"></span></span>
                    <span class="small" id="rentReceiptSummary"></span>
                </div>
                <div id="rentReceiptGrid"></div>
                <div id="rentReceiptEditor" class="border rounded p-3 mt-3 d-none" style="background:#f8f9fa;">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <strong id="rentReceiptEditorTitle"></strong>
                        <span class="text-muted small">金額會自動用宿舍設定的月租（支出）</span>
                    </div>
                    <div class="row g-2 align-items-end">
                        <div class="col-8">
                            <label class="form-label small mb-1">備註（選填）</label>
                            <input type="text" id="rentReceiptNote" class="form-control form-control-sm" placeholder="例如：現金、轉帳">
                        </div>
                        <div class="col-4 d-flex gap-1">
                            <button type="button" id="rentReceiptSave" class="btn btn-sm btn-primary flex-fill">標記已收</button>
                            <button type="button" id="rentReceiptClear" class="btn btn-sm btn-outline-danger flex-fill" title="取消該月記錄">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer py-2">
                <span class="small text-muted me-auto"><i class="bi bi-lightbulb me-1"></i>點月份格子即可記錄／編輯該月租金</span>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">關閉</button>
            </div>
        </div>
    </div>
</div>
@endpush
@endonce