@extends('layouts.app')
@section('title', '[東京都|〇〇駐輪場] 駐輪場所、料金マスタ')

@section('content')

{{-- ▼ コンテンツヘッダー（パンくず） --}}
<div class="content-header">
    <div class="container-fluid">

        <div class="row mb-2">
            <div class="col-lg-6">
                <h1 class="m-0 text-dark">{{ __('駐輪場所、料金マスタ') }}</h1>
            </div>
            <div class="col-lg-6">
                <ol class="breadcrumb float-sm-right text-sm">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">ホーム</a></li>
                    <li class="breadcrumb-item active">{{ __('駐輪場所、料金マスタ') }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- ▼ メインコンテンツ --}}
<section class="content">
    <div class="container-fluid">

        {{-- ▼ 並び替え用 hidden --}}
        <form action="{{ route('prices') }}" method="POST" id="list-form">
            @csrf
            <input type="hidden" name="sort" value="{{ $sort ?? '' }}">
            <input type="hidden" name="sort_type" value="{{ $sort_type ?? '' }}">
        </form>

       {{-- ▼ 各種アクションボタン群 --}}
        <div class="container-fluid mb20">
            {{-- 新規 --}}
            <button type="button" class="btn btn-sm btn-default mr10"
                onclick="location.href='{{ route('price_add') }}'">新規</button>

            {{-- 削除 --}}
            <button type="submit" class="btn btn-sm btn-default mr10"
                form="form_delete" name="delete"
                onclick="return confirm('選択した項目を削除しますか？');">削除</button>

            {{-- CSV出力（全件 or ソート条件付き）--}}
            <form id="form_export" method="POST" action="{{ route('prices_export') }}" class="d-inline">
                @csrf
                <input type="hidden" name="sort" value="{{ $sort ?? '' }}">
                <input type="hidden" name="sort_type" value="{{ $sort_type ?? '' }}">
                <button type="submit" class="btn btn-sm btn-default mr10">CSV出力</button>
            </form>

            {{-- エクスポート（条件選択モーダル） --}}
            <button type="button" class="btn btn-sm btn-default mr10" data-toggle="modal" data-target="#exportModal">
                エクスポート
            </button>

            {{-- インポート（モーダル） --}}
            <button type="button" class="btn btn-sm btn-default mr10" data-toggle="modal" data-target="#importModal">
                インポート
            </button>
        </div>

        {{-- エクスポート用モーダル --}}
        <div class="modal fade" id="exportModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <form method="POST" action="{{ route('prices_export') }}">
                @csrf
                <div class="modal-body">
                <p>エクスポートする駐輪場を選択してください。</p>
                <div class="form-group row">
                    <label for="park_id" class="col-sm-4 col-form-label">駐輪場名</label>
                    <div class="col-sm-8">
                    <select name="park_id" id="park_id" class="form-control">
                        @foreach($parks as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                    </div>
                </div>
                </div>
                <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary w-25">OK</button>
                <button type="button" class="btn btn-secondary w-25" data-dismiss="modal">キャンセル</button>
                </div>
            </form>
            </div>
        </div>
        </div>

        {{-- インポート用モーダル --}}
        <div class="modal fade" id="importModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <form method="POST" action="{{ route('prices_import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                <p>料金表をインポートします。ファイルを選択してください。</p>
                <div class="form-group row">
                    <label for="import_file" class="col-sm-4 col-form-label">ファイル名</label>
                    <div class="col-sm-8">
                    <input type="file" name="file" id="import_file" class="form-control" required>
                    </div>
                </div>
                </div>
                <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary w-25">OK</button>
                <button type="button" class="btn btn-secondary w-25" data-dismiss="modal">キャンセル</button>
                </div>
            </form>
            </div>
        </div>
        </div>

        {{-- ▼ ページネーション --}}
        <div class="container-fluid">
            <div class="d-flex justify-content-end mb-3">
                {{ $list->appends([
                    'sort'      => $sort ?? '',
                    'sort_type' => $sort_type ?? ''
                ])->links('pagination') }}
            </div>
        </div>

        {{-- ▼ フラッシュメッセージ --}}
        <div class="form col-lg-12">
            @if(Session::has('success'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {{ Session::get('success') }}
                </div>
            @elseif(Session::has('error'))
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="icon fa fa-ban"></i> {{ __('誤差') }}:</h4>
                    {!! Session::get('error') !!}
                </div>
            @elseif(isset($errorMsg))
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="icon fa fa-ban"></i> {{ __('誤差') }}:</h4>
                    {!! $errorMsg !!}
                </div>
            @endif
        </div>

        {{-- ▼ 一覧（市区マスタ準拠：1枚テーブル／先頭が「チェック＋編集」統合列） --}}
        <form action="{{ route('prices_delete') }}" method="post" id="form_delete">
            @csrf
            
            <!-- ▼ ここから単一テーブル構成 ----------------------------------------- -->
            <div class="col-lg-12 mb20">
                <!-- <div class="table-responsive"> -->
                <div class="table-responsive prices-wrap">
                <table class="table table-bordered dataTable text-nowrap prices-table">
                    <thead class="thead-light">
                    <tr>
                        {{-- 1列目：チェック＋編集 --}}
                        <th class="text-left freeze freeze-1" style="border-left:1px solid #dcdcdc;">
                        <input type="checkbox" onclick="$('input[name*=\'pk\']').prop('checked', this.checked);">
                        </th>

                        {{-- 2列目：駐輪場所ID（ソート可） --}}
                        <th class="sorting freeze freeze-2 {{ ($sort=='price_parkplaceid') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}"
                            sort="price_parkplaceid">
                        <span>駐輪場所ID</span>
                        </th>

                        {{-- 3列目：駐輪場ID（ソート可） --}}
                        <th class="sorting freeze freeze-3 {{ ($sort=='park_id') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}"
                            sort="park_id">
                        <span>駐輪場ID</span>
                        </th>

                        {{-- 4列目：商品名（固定ここまで） --}}
                        <th class="freeze freeze-4"><span>商品名</span></th>

                        {{-- 以下は通常列 --}}
                        <th><span>期間</span></th>
                        <th><span>利用者分類ID</span></th>
                        <th><span>駐輪料金（税込）</span></th>
                        <th class="sorting {{ ($sort=='psection_id') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="psection_id"><span>車種区分ID</span></th>
                        <th class="sorting {{ ($sort=='price_ptypeid') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="price_ptypeid"><span>駐輪分類</span></th>
                        <th class="sorting {{ ($sort=='pplace_id') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="pplace_id"><span>駐車車室ID</span></th>
                    </tr>
                    </thead>

                    <tbody class="bg-white">
                    @foreach($list as $item)
                    <tr>
                        {{-- 1列目：チェック＋編集 --}}
                        <td style="background: #faebd7;">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" class="m-0 checkbox" name="pk[]" value="{{ $item->price_parkplaceid }}">
                            <a href="{{ route('price_edit', ['id' => $item->price_parkplaceid]) }}" class="btn btn-sm btn-default ml10">編集</a>
                        </div>
                        </td>

                        {{-- 2～4列目（固定） --}}
                        <td class="sm-item text-left align-middle freeze freeze-2">{{ $item->price_parkplaceid }}</td>
                        <td class="sm-item text-left align-middle freeze freeze-3">{{ $parks[$item->park_id] ?? $item->park_id }}</td>
                        <td class="sm-item text-left align-middle freeze freeze-4">{{ $item->prine_name }}</td>

                        {{-- 以降は通常列 --}}
                        <td class="sm-item text-left align-middle">{{ $item->price_month }}ヶ月</td>
                        <td class="sm-item text-left align-middle">{{ $item->user_category_name }}</td>
                        <td class="sm-item text-left align-middle">{{ $item->price }}</td>
                        <td class="sm-item text-left align-middle">{{ $item->psection_id }}</td>
                        <td class="sm-item text-left align-middle">{{ $item->price_ptypeid }}</td>
                        <td class="sm-item text-left align-middle">{{ $item->pplace_id }}</td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
                </div>

            </div>
            <!-- ▲ 単一テーブル構成ここまで ----------------------------------------- -->
        </form>

    </div>
</section>

{{-- ▼ 全選択/全解除（name="pk[]" を対象） --}}
<script>
document.getElementById('checkbox_all')?.addEventListener('change', function(e){
    document.querySelectorAll('input[name="pk[]"]').forEach(function(el){
        el.checked = e.target.checked;
    });
});
</script>
@endsection

@section('scripts')
<script>
$(function(){
    $('.sorting').click(function(){
        let sort = $(this).attr('sort');
        let currentSort = $('input[name="sort"]').val();
        let currentType = $('input[name="sort_type"]').val();
        let newType = 'asc';

        if (sort === currentSort) {
            newType = (currentType === 'asc') ? 'desc' : 'asc';
        }
        $('input[name="sort"]').val(sort);
        $('input[name="sort_type"]').val(newType);
        $('#list-form').submit();
    });
});
</script>
@endsection