@extends('adminlte::page')

@section('title', '通知設定')

@section('content_header')
    <h1>通知設定</h1>
@stop

@section('content')
    @php
        // 全都道府県ID
        $allPrefectureIds = [];
        foreach ($prefectureGroups as $region => $prefectures) {
            foreach ($prefectures as $prefecture) {
                $allPrefectureIds[] = $prefecture->id;
            }
        }
        $allPropertyTypes = $propertyTypes ?? [];
        $selectedPrefectureIds = old('conditions.prefecture_ids', $condition?->conditions['prefecture_ids'] ?? []);
        $selectedPropertyTypes = old('conditions.property_types', $condition?->conditions['property_types'] ?? []);
        if (empty($selectedPrefectureIds)) $selectedPrefectureIds = $allPrefectureIds;
        if (empty($selectedPropertyTypes)) $selectedPropertyTypes = $allPropertyTypes;
    @endphp
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">LINE通知設定</h3>
        </div>
        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('notification-conditions.update', ['user_id' => $user->id]) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="form-group">
                    <label>都道府県（複数選択可）</label>
                    <div class="prefecture-groups">
                        @foreach($prefectureGroups as $region => $prefectures)
                            <div class="card mb-3">
                                <div class="card-header bg-light">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" 
                                               class="custom-control-input region-checkbox" 
                                               id="region_{{ $region }}"
                                               data-region="{{ $region }}">
                                        <label class="custom-control-label" for="region_{{ $region }}">
                                            <h5 class="mb-0 d-inline">{{ $region }}</h5>
                                        </label>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        @foreach($prefectures as $prefecture)
                                            <div class="col-md-4">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" 
                                                           class="custom-control-input prefecture-checkbox"
                                                           data-region="{{ $region }}"
                                                           id="prefecture_{{ $prefecture->id }}" 
                                                           name="conditions[prefecture_ids][]" 
                                                           value="{{ $prefecture->id }}"
                                                           {{ in_array($prefecture->id, $selectedPrefectureIds) ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="prefecture_{{ $prefecture->id }}">
                                                        {{ $prefecture->name }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @error('conditions.prefecture_ids')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label>物件種別（複数選択可）</label>
                    <div class="row">
                        @foreach($propertyTypes as $type)
                            <div class="col-md-4">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" 
                                           class="custom-control-input" 
                                           id="property_type_{{ str_replace(['・', '、', ' '], '_', $type) }}" 
                                           name="conditions[property_types][]" 
                                           value="{{ $type }}"
                                           {{ in_array($type, $selectedPropertyTypes) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="property_type_{{ str_replace(['・', '、', ' '], '_', $type) }}">
                                        {{ $type }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @error('conditions.property_types')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="conditions[min_price]">最低価格</label>
                            <div class="input-group">
                                <input type="number" name="conditions[min_price]" id="conditions[min_price]" 
                                    class="form-control @error('conditions.min_price') is-invalid @enderror"
                                    value="{{ old('conditions.min_price', $condition?->conditions['min_price'] ?? '') }}" 
                                    min="0" step="10000">
                                <div class="input-group-append">
                                    <span class="input-group-text">円</span>
                                </div>
                            </div>
                            @error('conditions.min_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="conditions[max_price]">最高価格</label>
                            <div class="input-group">
                                <input type="number" name="conditions[max_price]" id="conditions[max_price]" 
                                    class="form-control @error('conditions.max_price') is-invalid @enderror"
                                    value="{{ old('conditions.max_price', $condition?->conditions['max_price'] ?? '') }}" 
                                    min="0" step="10000">
                                <div class="input-group-append">
                                    <span class="input-group-text">円</span>
                                </div>
                            </div>
                            @error('conditions.max_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">設定を保存</button>
                    @if($condition)
                        <form action="{{ route('notification-conditions.toggle', ['user_id' => $user->id]) }}" method="POST" class="d-inline">
                            @csrf
                            @method('PUT')
                            <button type="submit" class="btn {{ $condition->is_active ? 'btn-warning' : 'btn-success' }}">
                                {{ $condition->is_active ? '通知を無効にする' : '通知を有効にする' }}
                            </button>
                        </form>
                    @endif
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
    <style>
        .form-group {
            margin-bottom: 1rem;
        }
        .input-group-text {
            min-width: 40px;
            justify-content: center;
        }
        .prefecture-groups .card {
            border: 1px solid rgba(0,0,0,.125);
        }
        .prefecture-groups .card-header {
            padding: 0.75rem 1.25rem;
            background-color: #f8f9fa;
        }
        .prefecture-groups .card-header h5 {
            color: #333;
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
        }
        .prefecture-groups .card-body {
            padding: 1rem;
        }
        .custom-checkbox {
            margin-bottom: 0.5rem;
        }
        .invalid-feedback.d-block {
            display: block;
        }
        /* 地方チェックボックスのスタイル */
        .card-header .custom-control {
            margin: 0;
            padding-left: 2rem;
        }
        .card-header .custom-control-label {
            cursor: pointer;
            width: 100%;
        }
        .card-header .custom-control-label::before,
        .card-header .custom-control-label::after {
            top: 0.25rem;
        }
        /* インデターミネート状態のスタイル */
        .custom-control-input:indeterminate ~ .custom-control-label::before {
            border-color: #007bff;
            background-color: #007bff;
        }
        /* チェックボックスのホバー効果 */
        .custom-control-label:hover {
            color: #007bff;
        }
    </style>
@stop

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 地方チェックボックスの状態を更新する関数
    function updateRegionCheckbox(region) {
        const regionCheckbox = document.querySelector(`input.region-checkbox[data-region="${region}"]`);
        const prefectureCheckboxes = document.querySelectorAll(`input.prefecture-checkbox[data-region="${region}"]`);
        const checkedCount = Array.from(prefectureCheckboxes).filter(cb => cb.checked).length;
        const totalCount = prefectureCheckboxes.length;

        if (checkedCount === 0) {
            regionCheckbox.checked = false;
            regionCheckbox.indeterminate = false;
        } else if (checkedCount === totalCount) {
            regionCheckbox.checked = true;
            regionCheckbox.indeterminate = false;
        } else {
            regionCheckbox.checked = false;
            regionCheckbox.indeterminate = true;
        }
    }

    // 地方チェックボックスのクリックイベント
    document.querySelectorAll('.region-checkbox').forEach(function(regionCheckbox) {
        regionCheckbox.addEventListener('change', function() {
            const region = this.dataset.region;
            const isChecked = this.checked;
            
            document.querySelectorAll(`input.prefecture-checkbox[data-region="${region}"]`).forEach(function(prefCheckbox) {
                prefCheckbox.checked = isChecked;
            });
        });
    });

    // 都道府県チェックボックスのクリックイベント
    document.querySelectorAll('.prefecture-checkbox').forEach(function(prefCheckbox) {
        prefCheckbox.addEventListener('change', function() {
            const region = this.dataset.region;
            updateRegionCheckbox(region);
        });
    });

    // 初期状態の設定
    document.querySelectorAll('.region-checkbox').forEach(function(regionCheckbox) {
        const region = regionCheckbox.dataset.region;
        updateRegionCheckbox(region);
    });
});
</script>
@stop