@php
    $startOfLastYearMonth = Carbon\Carbon::now()->startOfMonth()->format('Y/m/d');
    $endOfMonth = Carbon\Carbon::now()->endOfMonth()->format('Y/m/d');
    $statusItems = [
        (object)['value' => '入荷予定', 'name' => '入荷予定'],
        (object)['value' => '入荷済', 'name' => '入荷済']
    ];
@endphp

<x-report.report-list-for-expected-receipt-list-dist :report="$report" :defs="$defs">
    
    {{-- header actions --}}
    <x-slot name="headerAction">
        <div class="flex items-center gap-4">
            @php($links = [
                    '3' => '入荷予定リスト（物流用（今月））',
                    '4' => '入荷予定リスト（物流用（来月））',
                ])
            @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="flex items-center gap-1.5">
                                <x-input.date id="public_expected_receipt_date_from" name="public_expected_receipt_date_from"
                                    value="{{old('public_expected_receipt_date_from', $startOfLastYearMonth)}}" />
                                <span>～</span>
                                <x-input.date id="public_expected_receipt_date_to" name="public_expected_receipt_date_to"
                                    value="{{old('public_expected_receipt_date_to', $endOfMonth)}}" />
                                <input type="hidden" id="date_from" value="{{ $startOfLastYearMonth }}">
                                <input type="hidden" id="date_to" value="{{ $endOfMonth }}">
                            </div>
                        </div>
                        <!-- | 状況 -->
                        <div>
                            <label>状況</label>
                            <div>
                                <x-input.radios :items="$statusItems" name="status"
                                    value="{{old('status', '入荷予定')}}" />
                            </div>
                        </div>
                        <!-- | 仕入先 --> 
                        <div>
                            <label>仕入先</label>
                            <div>
                                <livewire:parts.input-supplier name="supplier_id"
                                    value="{{old('supplier_id')}}" >
                            </div>
                        </div>
                    </div>
                    <div>
                        <!-- | 仕入先名 -->
                        <div>
                            <label>仕入先名</label>
                            <div>
                                <x-input.text class="w-full"
                                    id="supplier_name" name="supplier_name" placeholder="部分一致"
                                    value="{{old('supplier_name')}}" />
                            </div>
                        </div>
                        <!-- | ETA -->
                        <div>
                            <label>ETA</label>
                            <div class="flex items-center gap-1.5">
                                <x-input.date id="receipt_date_from" name="receipt_date_from"
                                    value="{{old('receipt_date_from')}}" />
                                <span>～</span>
                                <x-input.date id="receipt_date_to" name="receipt_date_to"
                                    value="{{old('receipt_date_to')}}" />
                            </div>
                        </div>
                        <!-- | 本船名 -->
                        <div>
                            <label>本船名</label>
                            <div>
                                <x-input.text class="w-full"
                                    id="vessel_name" name="vessel_name" placeholder="部分一致"
                                    value="{{old('vessel_name')}}" />
                            </div>
                        </div>    
                    </div>
                    <div>
                        <!-- | INVOICE NO. -->
                        <div>
                            <label>INVOICE NO.</label>
                            <div>
                                <x-input.text class="w-full"
                                    id="invoice_number" name="invoice_number" placeholder="部分一致"
                                    value="{{old('invoice_number')}}" />
                            </div>
                        </div>
                        <!-- | 商品 -->
                        <div>
                            <label>商品</label>
                            <div>
                                <livewire:parts.input-product id="product_id"
                                    value="{{old('product_id')}}" >
                            </div>
                        </div>
                        <!-- | 商品名 -->
                        <div>
                            <label>商品名</label>
                            <div>
                                <x-input.text class="w-full"
                                    id="product_name" name="product_name" placeholder="部分一致"
                                    value="{{old('product_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-modal.search key="search" id="search" />
    <x-modal.frame key="frame" id="frame" />

    {{-- 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'));

                    // 営業公開入荷日
                    const publicExpectedReceiptdateFrom = document.getElementById('public_expected_receipt_date_from');
                    const dateFrom = document.getElementById('date_from');
                    publicExpectedReceiptdateFrom.value = dateFrom.value;
                    const publicExpectedReceiptdateTo = document.getElementById('public_expected_receipt_date_to');
                    const dateTo = document.getElementById('date_to');
                    publicExpectedReceiptdateTo.value = dateTo.value;

                    // 状況
                    const status = document.querySelector('input[name="status"][value="入荷予定"]');
                    status.checked = true;
                });
            }
        });
    </script>

    {{-- style --}}
    <style>
        .wrap-text {
            /* 改行 */
            white-space: pre-wrap !important;

            /* 中央表示（縦）*/
            display: flex;
            align-items: center;
            height: 100%;
        }
    </style>
    </x-slot>

</x-report.report-list-for-expected-receipt-list-dist>