@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.offstreet') !!}
        </div>

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

            <div class="card-body">
                <h6 class="motc-sec-title motc-sec-title--first">停車場基本資料</h6>
                <div class="motc-block">
                    <div id="carParkBox"></div>
                </div>

                <hr>
                <h6 class="motc-sec-title">出入口資料</h6>
                <div class="motc-block">
                    <div id="entranceExitBox"></div>
                </div>

                <hr>
                <h6 class="motc-sec-title">設施資料</h6>
                @error('ParkingFacilityList.Facilities.Facility')
                    <div class="alert alert-danger py-2">{{ $message }}</div>
                @enderror
                <div id="facilityList"></div>
                <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addFacility">
                    <i class="fas fa-plus"></i> 新增設施
                </button>

                <hr>
                <h6 class="motc-sec-title">售票服務資料</h6>
                <div class="motc-block">
                    <div id="ticketingBox"></div>
                </div>

                <hr>
                <h6 class="motc-sec-title">車位數資料</h6>
                @error('ParkingSpaceList.Spaces.Space')
                    <div class="alert alert-danger py-2">{{ $message }}</div>
                @enderror
                <div id="spaceList"></div>
                <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addSpace">
                    <i class="fas fa-plus"></i> 新增車位類型
                </button>
            </div>

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

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

    // ── 符號清單 ──
    // 垃圾桶圖示
    var TRASH = '<i class="fas fa-trash"></i>';
    // 必填星號圖示
    var STAR = ' <span class="text-danger">*</span>';

    // ── 欄位選項清單 ──
    var CAR_PARK_TYPES = @json($carParkTypes);
    var GUIDE_TYPES = @json($guideTypes);
    var PARKING_TYPES = @json($parkingTypes);
    var SITE_TYPES = @json($siteTypes);
    var CHARGE_TYPES = @json($chargeTypes);
    var OPERATION_TYPES = @json($operationTypes);
    var ENTRANCE_EXIT_TYPES = @json($entranceExitTypes);
    var FACILITY_TYPES = @json($facilityTypes);
    var SPACE_TYPES = @json($spaceTypes);
    var STAY_TYPES = @json($stayTypes);
    // 城市：只顯簡碼
    var CITY_CODES = {};
    @json($cityCodes ?? []).forEach(function (code) { CITY_CODES[code] = code; });

    // 頁籤既有資料
    var CARPARK = @json(old('CarParkList', $carParkList ?? []));
    var ENTRANCE_EXIT = @json(old('ParkingEntranceExitList', $entranceExitList ?? []));
    var TICKETING = @json(old('ParkingTicketingList', $ticketingList ?? []));
    var FACILITIES = @json(old('ParkingFacilityList.Facilities.Facility', $facilityList['Facilities']['Facility'] ?? []));
    var SPACES = @json(old('ParkingSpaceList.Spaces.Space', $spaceList['Spaces']['Space'] ?? []));
    var ERRORS = @json($errors->messages());

    // ── 工具函數 ──
    // 轉義 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>' : '';
    }

    // 生成唯一 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 textField(label, name, val, errPath, cols, type) {
        return '<div class="form-group col-md-' + (cols || 3) + '"><label>' + label + STAR + '</label>' +
            '<input type="' + (type || 'text') + '" class="form-control" name="' + name + '" value="' + esc(val) + '">' +
            err(errPath || name) + '</div>';
    }

    // 生成選擇欄位
    function selectField(label, name, map, val, errPath, cols) {
        return '<div class="form-group col-md-' + (cols || 3) + '"><label>' + label + STAR + '</label>' +
            '<select class="form-control" name="' + name + '"><option value="">請選擇</option>' + options(map, val) + '</select>' +
            err(errPath || name) + '</div>';
    }

    // 生成開關欄位
    function switchField(label, name, on, errPath) {
        var id = 'sw_' + name.replace(/[^A-Za-z0-9]/g, '_');
        return '<div class="form-group col-md-3"><label class="d-block">' + label + STAR + '</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>' + err(errPath || name) + '</div>';
    }

    // 生成多選核取欄位
    function checkGroup(label, name, map, selectedArr, errPath) {
        selectedArr = (selectedArr || []).map(String);
        var boxes = Object.keys(map).map(function (code) {
            var chk = selectedArr.indexOf(String(code)) > -1 ? ' checked' : '';
            return '<label class="motc-chip"><input type="checkbox" name="' + name + '[]" value="' + code + '"' + chk + '> ' + esc(map[code]) + '</label>';
        }).join('');
        return '<div class="form-group col-md-12"><label>' + label + STAR + '</label>' +
            '<div class="motc-chips">' + boxes + '</div>' + err(errPath || name) + '</div>';
    }

    // 依 dot 路徑安全取得巢狀物件值
    function cp(path, def) {
        var cur = CARPARK, parts = String(path).split('.');
        for (var i = 0; i < parts.length; i++) {
            if (cur == null || cur[parts[i]] == null) { return def === undefined ? '' : def; }
            cur = cur[parts[i]];
        }
        return cur;
    }

    // ── 停車場基本資料 ──
    var CARPARK_SWITCHES = [
        ['IsFreeParkingOutOfHours', '營業時間外是否不收費'],
        ['IsPublic', '是否公有停車場'],
        ['LiveOccupancyAvailable', '是否提供動態剩餘車位資訊'],
        ['EVRechargingAvailable', '是否有電動車充電設施'],
        ['MonthlyTicketAvailable', '是否提供月票'],
        ['SeasonTicketAvailable', '是否提供季票'],
        ['ReservationAvailable', '是否提供預約停車'],
        ['WheelchairAccessible', '是否有無障礙設施'],
        ['OvernightPermitted', '是否允許停車過夜'],
        ['TicketMachine', '是否有自動售票機'],
        ['Toilet', '是否有廁所'],
        ['Restaurant', '是否有餐廳'],
        ['GasStation', '是否有加油站'],
        ['Shop', '是否有商店'],
        ['Gated', '是否有閘口'],
        ['Lighting', '是否有照明設施'],
        ['SecureParking', '是否提供強化安全停車設施'],
        ['TicketOffice', '是否有售票處'],
        ['ProhibitedForAnyHazardousMaterialLoads', '是否允許裝卸危險物品'],
        ['SecurityGuard', '是否有管理人員'],
        ['Supervision', '是否有監視系統'],
    ];

    document.getElementById('carParkBox').innerHTML =
        '<div class="form-group"><label>停車場綜合描述' + STAR + '</label>' +
            '<input type="text" class="form-control" name="CarParkList[Description]" value="' + esc(cp('Description')) + '">' +
            err('CarParkList.Description') + '</div>' +
        '<div class="form-row">' +
            selectField('停車場類型', 'CarParkList[CarParkType]', CAR_PARK_TYPES, cp('CarParkType'), 'CarParkList.CarParkType') +
            selectField('停車導引類型', 'CarParkList[ParkingGuideType]', GUIDE_TYPES, cp('ParkingGuideType'), 'CarParkList.ParkingGuideType') +
            selectField('營運種類', 'CarParkList[OperationType]', OPERATION_TYPES, cp('OperationType'), 'CarParkList.OperationType') +
        '</div>' +
        '<div class="form-row">' + checkGroup('停車類型', 'CarParkList[ParkingTypes][ParkingType]', PARKING_TYPES, cp('ParkingTypes.ParkingType', []), 'CarParkList.ParkingTypes.ParkingType') + '</div>' +
        '<div class="form-row">' + checkGroup('停車場服務類型', 'CarParkList[ParkingSiteTypes][ParkingSiteType]', SITE_TYPES, cp('ParkingSiteTypes.ParkingSiteType', []), 'CarParkList.ParkingSiteTypes.ParkingSiteType') + '</div>' +
        '<div class="form-row">' + checkGroup('停車場收費方式', 'CarParkList[ChargeTypes][ChargeType]', CHARGE_TYPES, cp('ChargeTypes.ChargeType', []), 'CarParkList.ChargeTypes.ChargeType') + '</div>' +
        '<div class="form-row">' +
            textField('位置緯度（WGS84）', 'CarParkList[CarParkPosition][PositionLat]', cp('CarParkPosition.PositionLat'), 'CarParkList.CarParkPosition.PositionLat') +
            textField('位置經度（WGS84）', 'CarParkList[CarParkPosition][PositionLon]', cp('CarParkPosition.PositionLon'), 'CarParkList.CarParkPosition.PositionLon') +
        '</div>' +
        '<div class="form-group"><label>停車場地址' + STAR + '</label>' +
            '<input type="text" class="form-control" name="CarParkList[Address]" value="' + esc(cp('Address')) + '">' +
            err('CarParkList.Address') + '</div>' +
        '<div class="form-group"><label>票價資訊文字描述' + STAR + '</label>' +
            '<input type="text" class="form-control" name="CarParkList[FareDescription]" value="' + esc(cp('FareDescription')) + '">' +
            err('CarParkList.FareDescription') + '</div>' +
        '<div class="form-row">' +
            selectField('所在城市', 'CarParkList[CityCode]', CITY_CODES, cp('CityCode'), 'CarParkList.CityCode') +
            textField('所在行政區（鄉鎮區）', 'CarParkList[TownName]', cp('TownName'), 'CarParkList.TownName') +
            textField('所在行政區代碼', 'CarParkList[TownID]', cp('TownID'), 'CarParkList.TownID') +
        '</div>' +
        '<div class="motc-subtitle">場站屬性與設施（是／否）</div>' +
        '<div class="form-row">' +
            CARPARK_SWITCHES.map(function (s) {
                return switchField(s[1], 'CarParkList[' + s[0] + ']', cp(s[0], 0), 'CarParkList.' + s[0]);
            }).join('') +
        '</div>';

    // ── 出入口資料 ──
    document.getElementById('entranceExitBox').innerHTML =
        '<div class="form-row">' +
            selectField('出入口類型', 'ParkingEntranceExitList[EntranceExitType]', ENTRANCE_EXIT_TYPES, get(ENTRANCE_EXIT, 'EntranceExitType'), 'ParkingEntranceExitList.EntranceExitType') +
        '</div>';

    // ── 設施資料 ──
    function facilityRow(idx, item) {
        var p = 'ParkingFacilityList[Facilities][Facility][' + idx + ']', e = 'ParkingFacilityList.Facilities.Facility.' + idx;
        return '<div class="motc-repeat">' +
            '<div class="motc-repeat-head"><span class="motc-repeat-tag">設施</span>' +
                '<button type="button" class="btn btn-sm btn-outline-danger facility-del">' + TRASH + ' 刪除</button></div>' +
            '<div class="form-row">' +
                textField('設施名稱', p + '[FacilityName]', get(item, 'FacilityName'), e + '.FacilityName', 4) +
                selectField('設施類型', p + '[FacilityType]', FACILITY_TYPES, get(item, 'FacilityType'), e + '.FacilityType', 4) +
                textField('設施地點描述', p + '[LocationDescription]', get(item, 'LocationDescription'), e + '.LocationDescription', 4) +
            '</div>' +
        '</div>';
    }

    // 顯示設施資料
    var facilityList = document.getElementById('facilityList');
    facilityList.innerHTML = toEntries(FACILITIES).map(function (it) { return facilityRow(it.key, it.value); }).join('');

    // 新增設施資料
    document.getElementById('addFacility').addEventListener('click', function () {
        facilityList.insertAdjacentHTML('beforeend', facilityRow(nextIndex(), {}));
    });

    // 刪除設施資料
    facilityList.addEventListener('click', function (e) {
        if (e.target.closest('.facility-del')) { e.target.closest('.motc-repeat').remove(); }
    });

    // ── 售票服務資料 ──
    function tk(path, def) {
        var cur = TICKETING, parts = path.split('.');
        for (var i = 0; i < parts.length; i++) {
            if (cur == null || cur[parts[i]] == null) { return def === undefined ? '' : def; }
            cur = cur[parts[i]];
        }
        return cur;
    }

    // 生成售票服務欄位名稱
    function tkName(path) {
        return 'ParkingTicketingList[' + path.split('.').join('][') + ']';
    }

    // 生成售票服務錯誤訊息
    function tkErr(path) {
        return 'ParkingTicketingList.' + path;
    }

    // 生成開關欄位群組
    function switchRow(title, arr) {
        return '<div class="motc-subtitle">' + title + '</div><div class="form-row">' +
            arr.map(function (x) {
                return switchField(x[1], tkName(x[0]), tk(x[0], 0), tkErr(x[0]));
            }).join('') + '</div>';
    }

    // 顯示售票服務資料
    document.getElementById('ticketingBox').innerHTML =
        switchRow('發票', [
            ['HasInvoice', '是否開立發票'], ['HasEInvoice', '是否開立電子發票'], ['HasEInvoiceCarrier', '電子發票是否提供載具存入'],
        ]) +
        switchRow('發票種類／支援服務', [
            ['InvoiceType.DuplicateUniformInvoice', '二聯式發票'], ['InvoiceType.TriplicateUniformInvoice', '三聯式發票(含統編)'],
            ['InvoiceSupport.BANPrinted', '是否能打統一編號'], ['InvoiceSupport.Donation', '是否支援愛心捐贈'],
        ]) +
        switchRow('付款流程', [
            ['PaymentProcess.PayAndDisplay', '先付費再停車'], ['PaymentProcess.PayByPrepaidToken', '先付費取得代幣後停車'],
            ['PaymentProcess.PayAtExitBoothManualCollection', '出口收費亭人工收費'], ['PaymentProcess.PayAtMachineOnFootPriorToExit', '離場前先於繳費機繳費'],
            ['PaymentProcess.PayBySmartCard', '利用電子票證付費'], ['PaymentProcess.PayByMobile', '利用手機行動裝置付費'],
            ['PaymentProcess.PayByEtag', '利用eTag感應付費'], ['PaymentProcess.Others', '其他付款方式'],
        ]) +
        switchRow('付款方式', [
            ['PaymentMethod.Cash', '現金'], ['PaymentMethod.CreditCard', '信用卡'], ['PaymentMethod.SmartCard', '電子票證'], ['PaymentMethod.ETC', 'ETC帳戶'],
            ['PaymentMethod.MobilePayment', '行動支付'], ['PaymentMethod.Token', '代幣'], ['PaymentMethod.Others', '其他付款方法'],
        ]) +
        '<div class="form-group"><label>付款資訊文字描述' + STAR + '</label>' +
            '<input type="text" class="form-control" name="ParkingTicketingList[PaymentDescription]" value="' + esc(tk('PaymentDescription')) + '">' +
            err('ParkingTicketingList.PaymentDescription') + '</div>' +
        switchRow('繳費／驗票設備', [
            ['HasTicketingMachine', '是否有自動繳費機'], ['HasTicketingValidator', '是否有票證驗票設備'],
        ]);

    // ── 車位數資料 ──
    function spaceRow(idx, item) {
        var p = 'ParkingSpaceList[Spaces][Space][' + idx + ']', e = 'ParkingSpaceList.Spaces.Space.' + idx;
        return '<div class="motc-repeat">' +
            '<div class="motc-repeat-head"><span class="motc-repeat-tag">車位</span>' +
                '<button type="button" class="btn btn-sm btn-outline-danger space-del">' + TRASH + ' 刪除</button></div>' +
            '<div class="form-row">' +
                selectField('停車位類型', p + '[SpaceType]', SPACE_TYPES, get(item, 'SpaceType'), e + '.SpaceType', 4) +
                textField('停車位數', p + '[NumberOfSpaces]', get(item, 'NumberOfSpaces'), e + '.NumberOfSpaces', 4, 'number') +
                selectField('停車停留類型', p + '[StayType]', STAY_TYPES, get(item, 'StayType'), e + '.StayType', 4) +
            '</div>' +
            '<div class="form-row">' +
                switchField('是否機械車位', p + '[IsMechanical]', get(item, 'IsMechanical', 0), e + '.IsMechanical') +
                switchField('是否附充電樁', p + '[HasChargingPoint]', get(item, 'HasChargingPoint', 0), e + '.HasChargingPoint') +
            '</div>' +
        '</div>';
    }

    // 顯示車位數資料
    var spaceList = document.getElementById('spaceList');
    spaceList.innerHTML = toEntries(SPACES).map(function (it) { return spaceRow(it.key, it.value); }).join('');

    // 新增車位數資料
    document.getElementById('addSpace').addEventListener('click', function () {
        spaceList.insertAdjacentHTML('beforeend', spaceRow(nextIndex(), {}));
    });

    // 刪除車位數資料
    spaceList.addEventListener('click', function (e) {
        if (e.target.closest('.space-del')) { e.target.closest('.motc-repeat').remove(); }
    });

    // ── 表單送出時的資料驗證 ──
    // 清掉整列空白的設施／車位（避免誤送空列被必填擋下）
    document.getElementById('motcOffstreetForm').addEventListener('submit', function () {
        [facilityList, spaceList].forEach(function (box) {
            box.querySelectorAll('.motc-repeat').forEach(function (row) {
                var filled = false;
                row.querySelectorAll('input[type="text"], input[type="number"], select').forEach(function (el) {
                    if (String(el.value).trim() !== '') filled = true;
                });
                row.querySelectorAll('input[type="checkbox"]').forEach(function (el) { if (el.checked) filled = true; });
                if (!filled) row.remove();
            });
        });
    });
})();
</script>

<style>
    /* 區塊標題 */
    .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;
    }
    .motc-subtitle {
        font-size: 13px;
        font-weight: 700;
        margin: 14px 0 8px;
        color: #384252;
    }

    /* 多選核取欄位 */
    .motc-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .motc-chip {
        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-repeat {
        border: 1px solid #b3bdcb;
        border-left: 3px solid #007bff;
        border-radius: 5px;
        padding: 14px;
        margin-bottom: 12px;
        background: #fafbfd;
    }
    .motc-repeat-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .motc-repeat-tag {
        font-size: 12px;
        color: #6b7683;
        letter-spacing: .04em;
    }

    /* 開關欄位 */
    .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;
    }
    .custom-switch {
        padding-top: 4px;
    }
</style>
@endsection