@extends('layouts.main')

@section('pageTitle', '交通部車位上傳設定')

@section('content')
<div class="col-12">
    <div class="card card-primary card-outline card-outline-tabs">
        <div class="card-header p-0 border-bottom-0">
            @inject('thirdLevel', 'App\Presenters\ThirdLevelPresenter')
            {!! $thirdLevel->createThirdLevel($globalVariable['pathMain'], $globalVariable['pathSub'], 'motcParking.parkingDetail') !!}
        </div>

        <form action="{{ route('motcParking.parkingDetail.update') }}" method="post" id="motcParkingDetailForm">
            @csrf
            @method('PUT')

            <div class="card-body">
                <h6 class="motc-sec-title motc-sec-title--first">費率資料</h6>
                <div class="form-group">
                    <label for="Description">費率總說明</label>
                    <input type="text" class="form-control" name="ParkingRateList[Description]"
                           placeholder="描述所有費率資訊，如：本停車場費率包含計次、月租等多種收費方式。"
                           value="{{ old('ParkingRateList.Description', $rate['Description'] ?? '') }}">
                    @error('ParkingRateList.Description')
                        <span class="validateError">{{ $message }}</span>
                    @enderror
                </div>

                <p class="text-muted mb-3">請依實際狀況選填下列方費率方案；展開區塊即可進行詳細設定</p>

                @error('ParkingRateList.FreeRates.FreeRate')
                    <div class="alert alert-danger py-2">{{ $message }}</div>
                @enderror

                <div id="rateFamilies"></div>

                <hr>
                <h6 class="motc-sec-title">營業時間</h6>
                <div id="serviceTime"></div>

                <hr>
                <h6 class="motc-sec-title">停車場格位資料</h6>
                <div id="spotBlock"></div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary">儲存</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('js')
@include('include.datePickerAndMask')
@include('motcParking.tabGuard')
<script>
(function () {
    'use strict';

    // ── 符號清單 ──
    var TRASH = '<i class="fas fa-trash"></i>';
    var GRIP = '<svg width="10" height="16" viewBox="0 0 10 16"><g fill="currentColor">' +
        '<circle cx="2.5" cy="3" r="1.3"/><circle cx="7.5" cy="3" r="1.3"/>' +
        '<circle cx="2.5" cy="8" r="1.3"/><circle cx="7.5" cy="8" r="1.3"/>' +
        '<circle cx="2.5" cy="13" r="1.3"/><circle cx="7.5" cy="13" r="1.3"/></g></svg>';

    // ── 欄位選項清單 ──
    var RATE_FAMILIES = @json($rateFamilies);
    var SPACE_TYPES = @json($spaceTypes);
    var USER_TYPES = @json($userTypes);
    var RENT_TYPES = @json($rentTypes);
    var HALF_HOURS = @json($halfHours);
    var SERVICE_DAYS = @json($serviceDays);
    var OLD_RATE = @json(old('ParkingRateList', $rate ?? []));
    var ERRORS = @json($errors->messages());

    var DAY_LABEL = {
        Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三', Thursday: '星期四',
        Friday: '星期五', Saturday: '星期六', Sunday: '星期日'
    };

    var TIERED = [
        'ProgressiveRates',
        'BandRates',
    ];

    // ── 工具函數 ──
    // 轉義 HTML 特殊字元，避免 XSS 攻擊
    function esc(v) {
        return String(v == null ? '' : v).replace(/&/g, '&amp;').replace(/</g, '&lt;')
            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    // 取得物件值
    function get(obj, key, def) {
        return (obj && obj[key] != null) ? obj[key] : (def === undefined ? '' : def);
    }

    // 生成選項選單
    function options(map, selected) {
        return Object.keys(map).map(function (code) {
            var sel = String(code) === String(selected) ? ' selected' : '';
            return '<option value="' + code + '"' + sel + '>' + esc(map[code]) + '</option>';
        }).join('');
    }

    // 生成錯誤訊息
    function err(path) {
        return ERRORS[path] ? '<span class="validateError">' + esc(ERRORS[path][0]) + '</span>' : '';
    }

    // 生成時間選擇器
    function timePickHtml(label, fullName, val, errPath) {
        val = String(val == null ? '' : val);
        return '<div class="form-group col-md-3"><label>' + label + '</label>' +
            '<input type="text" class="form-control motc-timepicker" readonly autocomplete="off" ' +
            'placeholder="請選擇時間" name="' + fullName + '" value="' + esc(val) + '">' +
            err(errPath) + '</div>';
    }

    // 時間欄位掛上 daterangepicker
    function initTimePickers() {
        if (!(window.jQuery && jQuery.fn && jQuery.fn.daterangepicker)) { return; }
        jQuery('.motc-timepicker').each(function () {
            var $el = jQuery(this);
            if ($el.data('daterangepicker')) { return; }
            $el.daterangepicker({
                singleDatePicker: true,
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 1,
                autoUpdateInput: false,
                locale: { format: 'HH:mm', applyLabel: '確認', cancelLabel: '清除' }
            });
            $el.data('daterangepicker').container.addClass('motc-timeonly'); // 只留時間、藏日曆
            
            // 點擊時間選擇器時，更新值
            $el.on('show.daterangepicker', function (ev, picker) {
                if (/^\d{1,2}:\d{2}$/.test($el.val())) { picker.setStartDate(moment($el.val(), 'HH:mm')); }
            });

            // 點擊確認按鈕時，更新值
            $el.on('apply.daterangepicker', function (ev, picker) {
                $el.val(picker.startDate.format('HH:mm'));
                var fam = $el.closest('.motc-family')[0]; if (fam) { refresh(fam); }
            });

            // 點擊清除按鈕時，清空值
            $el.on('cancel.daterangepicker', function () {
                $el.val('');
                var fam = $el.closest('.motc-family')[0]; if (fam) { refresh(fam); }
            });
        });
    }

    // 生成服務日欄位
    function serviceDayHtml(namePrefix, errorPrefix, data) {
        var days = SERVICE_DAYS.map(function (day) {
            var checked = String(get(data, day, 0)) === '1' ? ' checked' : '';
            return '<label class="motc-day">' +
                '<input type="hidden" name="' + namePrefix + '[' + day + ']" value="0">' +
                '<input type="checkbox" name="' + namePrefix + '[' + day + ']" value="1"' + checked + '> ' +
                DAY_LABEL[day] + '</label>';
        }).join('');
        return '<div class="form-group">' +
            '<label>服務日型態</label><div class="motc-days">' + days + '</div>' +
            err(errorPrefix) + '</div>';
    }

    // ── 費率資料 ──
    // 生成費率資料各方案共通欄位
    function commonHtml(group, p, e, item) {
        var rent = group === 'RentRates'
            ? '<div class="form-group col-md-3"><label>租賃類型</label>' +
              '<select class="form-control" name="' + p + '[RentType]">' + options(RENT_TYPES, get(item, 'RentType')) + '</select>' +
              err(e + '.RentType') + '</div>'
            : '';
        return '<div class="form-row">' +
            '<div class="form-group col-md-3"><label>費率名稱</label>' +
                '<input type="text" class="form-control" name="' + p + '[RateName]" value="' + esc(get(item, 'RateName')) + '">' +
                err(e + '.RateName') + '</div>' +
            '<div class="form-group col-md-3"><label>使用者類型限制</label>' +
                '<select class="form-control" name="' + p + '[RestrictionUserType]">' + options(USER_TYPES, get(item, 'RestrictionUserType', 0)) + '</select>' +
                err(e + '.RestrictionUserType') + '</div>' +
            '<div class="form-group col-md-3"><label>停車位類型</label>' +
                '<select class="form-control" name="' + p + '[SpaceType]">' + options(SPACE_TYPES, get(item, 'SpaceType')) + '</select>' +
                err(e + '.SpaceType') + '</div>' +
            rent +
        '</div>';
    }

    // 生成各族群專屬欄位
    function specificHtml(group, p, e, item) {
        function field(label, name, type, val, cols) {
            return '<div class="form-group col-md-' + (cols || 3) + '"><label>' + label + '</label>' +
                '<input type="' + type + '" class="form-control" name="' + p + '[' + name + ']" value="' + esc(val) + '">' +
                err(e + '.' + name) + '</div>';
        }

        // 生成時間選擇器
        function timeF(label, name) {
            return timePickHtml(label, p + '[' + name + ']', get(item, name), e + '.' + name);
        }

        // 生成半小時計費欄位
        function halfField() {
            return '<div class="form-group col-md-3"><label>停車未滿30分鐘是否以半小時計費</label>' +
                '<select class="form-control" name="' + p + '[MinHalfHourCharge]">' + options(HALF_HOURS, get(item, 'MinHalfHourCharge', 1)) + '</select>' +
                err(e + '.MinHalfHourCharge') + '</div>';
        }

        if (group === 'FreeRates') {
            return '<div class="form-row">' + field('最長免費停留時間（分）', 'FreeMaxStay', 'number', get(item, 'FreeMaxStay')) + '</div>';
        }

        if (group === 'FlatRates') {
            return '<div class="form-row">' + field('費率價格（元）', 'RatePrice', 'number', get(item, 'RatePrice')) + '</div>';
        }

        if (group === 'RentRates') {
            return '<div class="form-row">' + field('費率價格（元）', 'RatePrice', 'number', get(item, 'RatePrice')) + '</div>';
        }

        if (group === 'HourlyRates') {
            return '<div class="form-row">' +
                    field('計費基準單位（分）', 'RateQualifier', 'number', get(item, 'RateQualifier')) +
                    field('費率價格（元）', 'RatePrice', 'number', get(item, 'RatePrice')) +
                    halfField() +
                '</div>' +
                '<div class="form-row">' +
                    timeF('計費開始時間', 'StartTime') +
                    timeF('計費結束時間', 'EndTime') +
                '</div>';
        }

        if (group === 'ProgressiveRates') {
            return '<div class="form-row">' + halfField() + '</div>' +
                '<div class="form-row">' +
                    timeF('計費開始時間', 'StartTime') +
                    timeF('計費結束時間', 'EndTime') +
                '</div>';
        }
        return '';
    }

    // 生成費率排序表頭
    function tierHeadHtml(group) {
        var qh = group === 'ProgressiveRates' ? '<span>計費基準單位（分）</span>' : '';
        return '<div class="motc-thead ' + (group === 'BandRates' ? 'band' : '') + '">' +
            '<span></span><span>排序</span><span>費率說明</span><span>停留開始時間</span><span>停留結束時間</span>' +
            qh + '<span>費率（元）</span><span class="motc-th-op">操作</span></div>';
    }

    // 生成費率排序欄位
    function tierHtml(group, prefix, errorPrefix, tier) {
        // 生成費率排序欄位單元
        function tcell(name, type, val, ph) {
            return '<div class="motc-tcell">' +
                '<input type="' + type + '" class="form-control" name="' + prefix + '[' + name + ']" value="' + esc(val) + '"' +
                (ph ? ' placeholder="' + ph + '"' : '') + '>' + err(errorPrefix + '.' + name) + '</div>';
        }

        // 生成計費基準單位欄位
        var qualifier = group === 'ProgressiveRates' ? tcell('RateQualifier', 'number', get(tier, 'RateQualifier')) : '';

        return '<div class="motc-tier ' + (group === 'BandRates' ? 'band' : '') + '">' +
            '<span class="motc-grip" title="按住拖曳排序">' + GRIP + '</span>' +
            '<span class="motc-tier-title motc-seqbadge">1</span>' +
            '<input type="hidden" class="motc-seq" name="' + prefix + '[RateSequence]" value="1">' +
            tcell('RateNote', 'text', get(tier, 'RateNote')) +
            tcell('StayStart', 'number', get(tier, 'StayStart')) +
            tcell('StayEnd', 'number', get(tier, 'StayEnd'), '-1 無上限') +
            qualifier +
            tcell('RatePrice', 'number', get(tier, 'RatePrice')) +
            '<div class="motc-tacts">' +
                '<button type="button" class="btn btn-sm btn-outline-danger motc-tier-del" title="刪除">' + TRASH + '</button>' +
            '</div>' +
        '</div>';
    }

    // 生成一段可停時段
    function parkingTimeHtml(prefix, errorPrefix, pt) {
        return '<div class="motc-ptime">' +
            '<div class="text-right"><button type="button" class="btn btn-sm btn-outline-danger pt-del">' + TRASH + ' 刪除時段</button></div>' +
            serviceDayHtml(prefix + '[ServiceDay]', errorPrefix + '.ServiceDay', get(pt, 'ServiceDay', {})) +
            '<div class="form-row">' +
                timePickHtml('開始時間', prefix + '[StartTime]', get(pt, 'StartTime'), errorPrefix + '.StartTime') +
                timePickHtml('結束時間', prefix + '[EndTime]', get(pt, 'EndTime'), errorPrefix + '.EndTime') +
            '</div>' +
        '</div>';
    }

    // 生成一筆費率方案
    function planHtml(group, index, item) {
        var node = RATE_FAMILIES[group].node;
        var p = 'ParkingRateList[' + group + '][' + node + '][' + index + ']';
        var e = 'ParkingRateList.' + group + '.' + node + '.' + index;
        var desc = TIERED.indexOf(group) > -1
            ? '<div class="form-group"><label>費率文字描述</label>' +
              '<input type="text" class="form-control" name="' + p + '[RateDescription]" value="' + esc(get(item, 'RateDescription')) + '">' +
              err(e + '.RateDescription') + '</div>'
            : '';

        var nested = '';
        if (group === 'RentRates') {
            var times = toEntries(get(get(item, 'ParkingTimes', {}), 'ParkingTime', [])).map(function (it) {
                return parkingTimeHtml(p + '[ParkingTimes][ParkingTime][' + it.key + ']', e + '.ParkingTimes.ParkingTime.' + it.key, it.value);
            }).join('');
            nested = '<div class="motc-subtitle">可停時段</div>' +
                '<div class="motc-nested motc-times" data-prefix="' + p + '">' + times + '</div>' +
                '<button type="button" class="btn btn-sm btn-outline-secondary mt-2 add-ptime"><i class="fas fa-plus"></i> 新增時段</button>';
        } else if (TIERED.indexOf(group) > -1) {
            var tiers = toEntries(get(get(item, 'Rates', {}), 'Rate', [])).map(function (it) {
                return tierHtml(group, p + '[Rates][Rate][' + it.key + ']', e + '.Rates.Rate.' + it.key, it.value);
            }).join('');
            nested = '<div class="motc-subtitle">費率排序</div>' +
                '<div class="motc-nested">' + tierHeadHtml(group) +
                    '<div class="motc-tiers" data-group="' + group + '" data-prefix="' + p + '">' + tiers + '</div>' +
                '</div>' +
                '<button type="button" class="btn btn-sm btn-outline-secondary mt-2 add-tier"><i class="fas fa-plus"></i> 新增費率</button>';
        }

        // 非租賃的服務日在時段內
        var svc = group === 'RentRates' ? '' : serviceDayHtml(p + '[ServiceDay]', e + '.ServiceDay', get(item, 'ServiceDay', {}));

        // 生成一筆費率方案
        return '<div class="motc-plan">' +
            '<div class="motc-plan-head"><span class="motc-plan-tag">方案</span>' +
                '<button type="button" class="btn btn-sm btn-outline-danger plan-del">' + TRASH + ' 刪除方案</button></div>' +
            commonHtml(group, p, e, item) +
            desc +
            specificHtml(group, p, e, item) +
            svc +
            nested +
        '</div>';
    }

    // 生成唯一 index，用於動態新增的欄位，如 費率排序、可停時段
    function nextIndex() {
        return Date.now() + '_' + Math.floor(Math.random() * 1000);
    }

    // 將物件轉為陣列，用於顯示多筆欄位
    function toEntries(v) {
        return Object.keys(v || {}).map(function (k) { return { key: k, value: v[k] }; });
    }

    // 費率排序自動重編
    function renumber(box) {
        var tiers = box.querySelectorAll(':scope > .motc-tier');
        tiers.forEach(function (t, i) {
            t.querySelector('.motc-tier-title').textContent = (i + 1);
            var seq = t.querySelector('.motc-seq');
            if (seq) seq.value = (i + 1);
        });
    }

    // 標記預設值
    function markDefaults() {
        host.querySelectorAll('select:not([data-default])').forEach(function (s) { s.dataset.default = s.value; });
    }

    // 判斷方案是否已填寫
    function planFilled(plan) {
        var filled = false;
        plan.querySelectorAll('input[type="text"], input[type="number"]').forEach(function (el) {
            if (el.value.trim() !== '') filled = true;
        });
        plan.querySelectorAll('input[type="checkbox"]').forEach(function (el) { if (el.checked) filled = true; });
        plan.querySelectorAll('select').forEach(function (el) {
            if (el.dataset.default !== undefined && el.value !== el.dataset.default) filled = true;
        });
        return filled;
    }

    // 更新方案設定狀態
    function refresh(fam) {
        var n = 0;
        fam.querySelectorAll('.motc-plan').forEach(function (p) { if (planFilled(p)) n++; });
        var label = fam.querySelector('.motc-fcount');
        label.textContent = n > 0 ? ('已設定 ' + n + ' 筆方案') : '未設定';
        label.classList.toggle('is-on', n > 0);
    }

    // 生成費率資料族群卡片
    var host = document.getElementById('rateFamilies');

    Object.keys(RATE_FAMILIES).forEach(function (group) {
        var family = RATE_FAMILIES[group];
        var items = toEntries(get(OLD_RATE[group] || {}, family.node, []));
        var hasData = items.length > 0;

        // 生成方案列表
        var plans = items.map(function (it) { return planHtml(group, it.key, it.value); }).join('');

        // 生成族群卡片
        var card = document.createElement('div');
        card.className = 'motc-family';
        card.dataset.group = group;
        card.dataset.open = hasData ? 'true' : 'false';
        card.innerHTML =
            '<div class="motc-fhead">' +
                '<span class="motc-fchev">▼</span>' +
                '<span class="motc-fname">' + esc(family.label) + '</span>' +
                '<span class="motc-fcount">未設定</span>' +
            '</div>' +
            '<div class="motc-fbody">' +
                '<div class="motc-plans">' + plans + '</div>' +
                '<button type="button" class="btn btn-sm btn-outline-primary add-plan"><i class="fas fa-plus"></i> 新增方案</button>' +
            '</div>';
        host.appendChild(card);
    });

    // 初始化費率方案的狀態標記
    markDefaults();
    host.querySelectorAll('.motc-tiers').forEach(renumber);
    host.querySelectorAll('.motc-family').forEach(refresh);
    initTimePickers();

    // 生成營業時間資料
    var OLD_SERVICETIME = @json(old('ParkingServiceTimeList.OpeningHours.OpeningHour.0', $serviceTime['OpeningHours']['OpeningHour'][0] ?? []));
    var OLD_SPOT = @json(old('ParkingSpotList.Spots.Spot.0', $spot['Spots']['Spot'][0] ?? []));
    var SPOT_COUNT = @json($spotCount ?? 0);

    // 生成開關欄位
    function switchHtml(label, name, on, id) {
        return '<div class="form-group"><label class="d-block">' + label + '</label>' +
            '<div class="custom-control custom-switch">' +
                '<input type="hidden" name="' + name + '" value="0">' +
                '<input type="checkbox" class="custom-control-input" id="' + id + '" name="' + name + '" value="1"' +
                    (String(on) === '1' ? ' checked' : '') + '>' +
                '<label class="custom-control-label" for="' + id + '"></label>' +
                '<span class="motc-switch-state"></span>' +
            '</div></div>';
    }

    // 渲染營業時間資料
    function renderServiceTime() {
        var st = OLD_SERVICETIME || {};
        var days = st.ServiceDay;
        if (!days) { days = {}; SERVICE_DAYS.forEach(function (d) { days[d] = 1; }); } // 無資料→七天全勾
        document.getElementById('serviceTime').innerHTML =
            '<div class="motc-block">' +
                serviceDayHtml('ParkingServiceTimeList[OpeningHours][OpeningHour][0][ServiceDay]', 'ParkingServiceTimeList.OpeningHours.OpeningHour.0.ServiceDay', days) +
                '<div class="form-row">' +
                    timePickHtml('開始營業時間', 'ParkingServiceTimeList[OpeningHours][OpeningHour][0][StartTime]', get(st, 'StartTime', '00:00'), 'ParkingServiceTimeList.OpeningHours.OpeningHour.0.StartTime') +
                    timePickHtml('結束營業時間', 'ParkingServiceTimeList[OpeningHours][OpeningHour][0][EndTime]', get(st, 'EndTime', '00:00'), 'ParkingServiceTimeList.OpeningHours.OpeningHour.0.EndTime') +
                '</div>' +
                switchHtml('該時段是否免費', 'ParkingServiceTimeList[OpeningHours][OpeningHour][0][FreeOfCharge]', get(st, 'FreeOfCharge', 0), 'sw_free') +
            '</div>';
    }

    // 渲染車位資料
    function renderSpot() {
        var s = OLD_SPOT || {};
        document.getElementById('spotBlock').innerHTML =
            '<div class="motc-block">' +
                '<div class="form-row">' +
                    '<div class="form-group col-md-4"><label>停車格位數量</label>' +
                        '<input type="text" class="form-control" value="' + esc(SPOT_COUNT) + '" readonly></div>' +
                    '<div class="form-group col-md-4"><label>停車位類型</label>' +
                        '<input type="text" class="form-control" value="所有類型" readonly></div>' +
                    '<div class="form-group col-md-4"><label>停車格位所在樓層</label>' +
                        '<input type="text" class="form-control" name="ParkingSpotList[Spots][Spot][0][Floor]" value="' + esc(get(s, 'Floor')) + '">' +
                        err('ParkingSpotList.Spots.Spot.0.Floor') + '</div>' +
                '</div>' +
                switchHtml('是否附屬充電樁', 'ParkingSpotList[Spots][Spot][0][HasChargingPoint]', get(s, 'HasChargingPoint', 0), 'sw_charge') +
            '</div>';
    }

    // 渲染資料
    renderServiceTime();
    renderSpot();
    initTimePickers(); // 掛上營業時間的時間選擇器

    // 監聽事件
    host.addEventListener('input', function (e) { var f = e.target.closest('.motc-family'); if (f) refresh(f); });
    host.addEventListener('change', function (e) { var f = e.target.closest('.motc-family'); if (f) refresh(f); });

    // 點擊事件
    host.addEventListener('click', function (e) {
        // 點擊族群卡片標題
        var head = e.target.closest('.motc-fhead');
        if (head) {
            var fam = head.closest('.motc-family');
            var wasOpen = fam.dataset.open === 'true';
            fam.dataset.open = wasOpen ? 'false' : 'true';
            if (!wasOpen && !fam.querySelector('.motc-plan')) {
                fam.querySelector('.motc-plans').insertAdjacentHTML('beforeend', planHtml(fam.dataset.group, nextIndex(), {}));
                markDefaults(); refresh(fam); initTimePickers();
            }
            return;
        }

        // 點擊新增方案按鈕
        var t = e.target;
        var addPlan = t.closest('.add-plan');
        if (addPlan) {
            var famA = addPlan.closest('.motc-family');
            famA.querySelector('.motc-plans').insertAdjacentHTML('beforeend', planHtml(famA.dataset.group, nextIndex(), {}));
            markDefaults(); refresh(famA); initTimePickers();
            return;
        }

        // 點擊刪除方案按鈕
        if (t.closest('.plan-del')) {
            var plan = t.closest('.motc-plan'); var famP = plan.closest('.motc-family');
            plan.remove(); refresh(famP); return;
        }
        
        // 點擊新增費率按鈕
        var addTier = t.closest('.add-tier');
        if (addTier) {
            var box = addTier.previousElementSibling.querySelector('.motc-tiers');   // data-prefix = group[index]
            box.insertAdjacentHTML('beforeend',
                tierHtml(box.dataset.group, box.dataset.prefix + '[Rates][Rate][' + nextIndex() + ']', '', {}));
            renumber(box); return;
        }

        // 點擊刪除費率按鈕
        if (t.closest('.motc-tier-del')) {
            var tier = t.closest('.motc-tier'); var boxD = tier.parentElement;
            tier.remove(); renumber(boxD); return;
        }

        // 點擊新增可停時段按鈕
        var addPt = t.closest('.add-ptime');
        if (addPt) {
            var box2 = addPt.previousElementSibling;     // .motc-times，data-prefix = group[index]
            box2.insertAdjacentHTML('beforeend',
                parkingTimeHtml(box2.dataset.prefix + '[ParkingTimes][ParkingTime][' + nextIndex() + ']', '', {}));
            initTimePickers();
            return;
        }

        // 點擊刪除可停時段按鈕
        if (t.closest('.pt-del')) {
            t.closest('.motc-ptime').remove();
            return;
        }
    });

    // 拖曳排序事件
    var dragRow = null, dragBox = null;

    // 按住拖曳把手時，標記為可拖曳
    host.addEventListener('mousedown', function (e) {
        var grip = e.target.closest('.motc-grip');
        if (grip) grip.closest('.motc-tier').setAttribute('draggable', 'true');
    });

    // 放開拖曳把手時，取消可拖曳標記
    document.addEventListener('mouseup', function () {
        if (!dragRow) host.querySelectorAll('.motc-tier[draggable="true"]').forEach(function (r) { r.removeAttribute('draggable'); });
    });

    // 按住拖曳把手時，標記為可拖曳
    host.addEventListener('dragstart', function (e) {
        var row = e.target.closest('.motc-tier');
        if (!row) return;
        dragRow = row; dragBox = row.parentElement;
        row.classList.add('motc-dragging');
        e.dataTransfer.effectAllowed = 'move';
    });

    // 拖曳把手時，標記為可拖曳
    host.addEventListener('dragover', function (e) {
        if (!dragRow) return;
        var over = e.target.closest('.motc-tier');
        if (!over || over === dragRow || over.parentElement !== dragBox) return;
        e.preventDefault();
        var rect = over.getBoundingClientRect();
        var after = (e.clientY - rect.top) > rect.height / 2;
        dragBox.insertBefore(dragRow, after ? over.nextSibling : over);
    });

    // 拖曳放下時，取消可拖曳標記
    host.addEventListener('drop', function (e) { if (dragRow) e.preventDefault(); });

    // 拖曳放下時，取消可拖曳標記
    host.addEventListener('dragend', function () {
        if (dragRow) {
            dragRow.classList.remove('motc-dragging');
            dragRow.removeAttribute('draggable');
            if (dragBox) renumber(dragBox);
            dragRow = null; dragBox = null;
        }
    });

    // ── 表單送出時的資料驗證 ──
    // 清掉整列空白的費率方案（避免誤送空方案被必填擋下）
    document.getElementById('motcParkingDetailForm').addEventListener('submit', function () {
        host.querySelectorAll('.motc-plan').forEach(function (p) { if (!planFilled(p)) p.remove(); });
    });
})();
</script>

<style>
    /* 費率資料族群卡片 */
    .motc-family { border: 1px solid #b3bdcb; border-radius: 6px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(20,30,50,.06); overflow: hidden; }
    .motc-fhead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f1f4f8; cursor: pointer; user-select: none; }
    .motc-fhead:hover { background: #e9eef4; }
    .motc-fname { font-weight: 700; font-size: 15px; }
    .motc-fchev { transition: transform .15s; color: #6b7683; font-size: 12px; width: 14px; text-align: center; }
    .motc-fcount { margin-left: auto; font-size: 12px; color: #6b7683; }
    .motc-fcount.is-on { color: #1a7a50; font-weight: 600; }
    .motc-family[data-open="false"] .motc-fbody { display: none; }
    .motc-family[data-open="false"] .motc-fchev { transform: rotate(-90deg); }
    .motc-family[data-open="true"] .motc-fhead { border-bottom: 1px solid #b3bdcb; }
    .motc-fbody { padding: 16px; }

    /* 費率方案 */
    .motc-plan { border: 1px solid #b3bdcb; border-left: 3px solid #007bff; border-radius: 5px; padding: 14px; margin-bottom: 12px; background: #fafbfd; }
    .motc-plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .motc-plan-tag { font-size: 12px; color: #6b7683; letter-spacing: .04em; }

    /* 服務日 */
    .motc-days { display: flex; flex-wrap: wrap; gap: 6px; }
    .motc-day { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #c3cbd6; border-radius: 5px; background: #fff; font-weight: 400; margin: 0; cursor: pointer; }

    /* 時間選擇器 */
    .motc-timepicker { background: #fff; cursor: pointer; }
    .daterangepicker.motc-timeonly .calendar-table,
    .daterangepicker.motc-timeonly .ranges { display: none; }
    .daterangepicker.motc-timeonly .drp-calendar.left { padding: 8px; }

    /* 子區塊 */
    .motc-subtitle { font-size: 13px; font-weight: 700; margin: 14px 0 8px; }
    .motc-nested { background: #f5f7fa; border: 1px solid #b3bdcb; border-radius: 5px; padding: 12px; }

    /* 費率排序：表格列 + 拖曳把手 */
    .motc-thead, .motc-tier { display: grid; align-items: center; gap: 10px; grid-template-columns: 26px 46px 1.5fr 1fr 1fr 1fr 1fr 52px; }
    .motc-thead.band, .motc-tier.band { grid-template-columns: 26px 46px 1.5fr 1fr 1fr 1fr 52px; }
    .motc-thead { padding: 0 10px 6px; font-size: 12px; color: #6b7683; font-weight: 700; }
    .motc-thead .motc-th-op { text-align: right; }
    .motc-tier { background: #fff; border: 1px solid #b3bdcb; border-radius: 5px; padding: 8px 10px; margin-bottom: 8px; }
    .motc-tier:last-child { margin-bottom: 0; }
    .motc-tier.motc-dragging { opacity: .45; border-style: dashed; }
    .motc-tcell .form-control { height: 34px; }
    .motc-tcell .validateError { font-size: 11px; }
    .motc-grip { display: inline-flex; align-items: center; justify-content: center; cursor: grab; color: #9aa4b1; }
    .motc-grip:active { cursor: grabbing; }
    .motc-seqbadge { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: #eef2f7; border: 1px solid #c3cbd6; border-radius: 50%; font-weight: 700; color: #384252; }
    .motc-tacts { display: flex; gap: 4px; justify-content: flex-end; }
    .motc-tacts .btn { padding: 3px 7px; }

    /* 租賃費率：可停時段 */
    .motc-ptime { border: 1px solid #b3bdcb; border-radius: 5px; padding: 12px; margin-bottom: 10px; background: #fff; }
    .motc-ptime:last-child { margin-bottom: 0; }

    /* 區塊標題 */
    .motc-sec-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; margin: 8px 0 12px; }
    .motc-sec-title--first { margin-top: 0; }
    .motc-sec-title::before { content: ""; flex: 0 0 auto; width: 4px; height: 18px; border-radius: 2px; background: #007bff; }

    /* 區塊卡片 */
    .motc-block { border: 1px solid #b3bdcb; border-radius: 5px; padding: 14px; background: #fafbfd; }

    /* 開關欄位 */
    .custom-switch .motc-switch-state { margin-left: 6px; font-weight: 600; }
    .custom-control-input:checked ~ .motc-switch-state::after { content: "是"; color: #007bff; }
    .custom-control-input:not(:checked) ~ .motc-switch-state::after { content: "否"; color: #6b7683; }
    .motc-spot { border: 1px solid #e2e7ee; border-radius: 5px; padding: 10px; margin-bottom: 8px; background: #fff; }

    /* 費率階梯響應式 */
    @media (max-width: 720px) {
        .motc-thead { display: none; }
        .motc-tier, .motc-tier.band { grid-template-columns: 26px 46px 1fr 1fr; }
        .motc-tacts { grid-column: 1 / -1; justify-content: flex-start; }
    }
</style>
@endsection