@php
    $startOfMonth = Carbon\Carbon::now()->startOfMonth()->format('Y/m');
    $endOfMonth = Carbon\Carbon::now()->endOfMonth()->format('Y/m');
@endphp
<x-report.report-list-for-customer-ledger :report="$report" :defs="$defs">
    
    {{-- header actions --}}
    <x-slot name="headerAction">
        <div class="flex items-center gap-4">
            @php($links = [
                    '69' => '得意先台帳（当月分）',
                    '70' => '得意先台帳（前月分）',
                    '71' => '得意先台帳（過去分）',
                ])
            @foreach($links as $id=>$name)
                @php($disabled = ($id == $report->id))
                <x-button.link-a text="{{$name}}" :disabled="$disabled" 
                    onclick="Action.link('{{route('reports.index', ['report'=>$id])}}')" />
            @endforeach
        </div>
    </x-slot>
    
    {{-- search --}}
    <x-slot name="search">
        <div x-data="search" >
            <form id="search" method="POST" action="{{route('reports.data',['report'=>$report->id])}}" >
                @csrf
                <x-list.search >
                    <div class="search-grid">
                        <div>
                            <!-- | 日付 -->
                            <div>
                                <label>日付</label>
                                <div class="grid">
                                    <div class="flex items-center">
                                    {{-- from --}}
                                    <x-input.date_ym
                                        id="date_from"
                                        name="date_from"
                                        value="{{ old('date_from', $params->date_from ?? $startOfMonth ) }}"
                                        data-peer="from"
                                        data-peer-target="#date_to"
                                    />
                                    <span>～</span>
                                    {{-- to --}}
                                    <x-input.date_ym
                                        id="date_to"
                                        name="date_to"
                                        value="{{ old('date_to', $params->date_to ?? $endOfMonth ) }}"
                                        data-peer="to"
                                        data-peer-target="#date_from"
                                    />
                                    </div>
                                </div>
                            </div>
                            <!-- | 得意先 -->
                            <div>
                                <label>得意先</label>
                                <div>
                                    <livewire:parts.input-customer
                                        value="{{old('customer_id')}}" >
                                </div>
                            </div>
                            <!-- | 得意先名 -->
                            <div>
                                <label>得意先名</label>
                                <div>
                                    <x-input.text class="w-full" id="customer_name_search"
                                        name="customer_name" placeholder="部分一致"
                                        value="{{old('customer_name')}}" />
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- ｜アクション --}}
                    <x-slot name="action">
                        <x-button.reset id="btn_reset" />
                        <x-button.search id="btn_search" />
                    </x-slot>
                </x-list.search>
            </form>
        </div>
    </x-slot>

    {{-- modal --}}
    <x-slot name="under">
        <x-modal.search key="search" id="search" />
        <x-modal.frame key="frame" id="frame" />
    </x-slot>

    {{-- script --}}
    <x-slot name="script">
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('search', List.search);
                Alpine.data('grid', Grid.list);
            });
            window.addEventListener('load', () => {
                // 検索ボタン押下時
                if ($('#btn_search')) {
                    $('#btn_search').addEventListener('click', (e) => {
                        Alpine.$data($('#grid')).search();
                    });
                }
                // リセットボタン押下時
                if ($('#btn_reset')) {
                    $('#btn_reset').addEventListener('click', (e) => {
                        //Action.resetForm($('#search'));
                        Livewire.dispatch('parts.input-customer.change', {value: null});
                        document.getElementById('customer_name_search').value = "";
                        document.getElementById('date_from').value = "{{ $startOfMonth }}";
                        document.getElementById('date_to').value = "{{ $endOfMonth }}";
                    });
                }
            });
        </script>
    </x-slot>

</x-report.report-list-for-customer-ledger>