{{-- 一括変更タブコンテンツ --}}
<div x-data="bulkChangeForm()" x-init="init()">

    {{-- 入力フォーム --}}
    <div class="bg-white shadow rounded-lg p-6 mb-4">
        <h3 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fa-solid fa-users-gear mr-2"></i>
            一括変更予約登録
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {{-- 左カラム --}}
            <div class="space-y-4">
                {{-- 旧担当者 --}}
                <div>
                    <label class="required">旧担当者</label>
                    <div>
                        <livewire:parts.input-sales-user
                            name="bulk_old_sales_rep_id"
                            suffix=".bulk_old"
                            value="" />
                        <x-input.error item="old_sales_rep_id" />
                    </div>
                    <p class="text-xs text-gray-500 mt-1">変更前の担当者を選択してください</p>
                </div>

                {{-- 新担当者 --}}
                <div>
                    <label class="required">新担当者</label>
                    <div>
                        <livewire:parts.input-sales-user
                            name="bulk_new_sales_rep_id"
                            suffix=".bulk_new"
                            value="" />
                        <x-input.error item="new_sales_rep_id" />
                    </div>
                    <p class="text-xs text-gray-500 mt-1">変更後の担当者を選択してください</p>
                </div>
            </div>

            {{-- 右カラム --}}
            <div class="space-y-4">
                {{-- 商品大分類 --}}
                <div>
                    <label>商品大分類</label>
                    <div>
                        <livewire:parts.select-category
                            :level="1"
                            name="bulk_category_id"
                            value="" />
                    </div>
                    <p class="text-xs text-gray-500 mt-1">指定した分類のみ変更（未選択時は全分類）</p>
                </div>

                {{-- 有効開始日 --}}
                <div>
                    <label class="required">有効開始日</label>
                    <div>
                        <x-input.date name="bulk_effective_date" class="w-full" />
                        <x-input.error item="effective_date" />
                    </div>
                    <p class="text-xs text-gray-500 mt-1">この日付に自動的にマスタが更新されます</p>
                </div>

                {{-- 備考 --}}
                <div>
                    <label>備考</label>
                    <div>
                        <textarea name="bulk_note" rows="2" class="w-full input-text"
                            x-model="note" maxlength="500"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 除外得意先セクション --}}
    <div class="bg-white shadow rounded-lg p-6 mb-4">
        <h4 class="text-md font-medium text-gray-900 mb-4">
            <i class="fa-solid fa-user-minus mr-2"></i>
            除外得意先
            <span class="text-sm font-normal text-gray-500 ml-2">（一括変更から除外する得意先を選択）</span>
        </h4>

        {{-- 除外得意先追加 --}}
        <div class="flex items-end gap-4 mb-4">
            <div class="flex-1">
                <label>除外する得意先を追加</label>
                <div>
                    <livewire:parts.input-customer
                        name="exclusion_customer_add"
                        suffix=".exclusion_add"
                        value="" />
                </div>
            </div>
            <div>
                <x-button shape="btn-sub btn-primary"
                    text="追加"
                    @click="addExclusion()" />
            </div>
        </div>

        {{-- 除外得意先一覧 --}}
        <div class="border rounded-lg overflow-hidden">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">得意先コード</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">得意先名</th>
                        <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 w-20">削除</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <template x-for="(customer, index) in exclusionCustomers" :key="customer.id">
                        <tr>
                            <td class="px-4 py-2 text-sm" x-text="customer.code"></td>
                            <td class="px-4 py-2 text-sm" x-text="customer.name"></td>
                            <td class="px-4 py-2 text-center">
                                <button type="button" @click="removeExclusion(index)"
                                    class="text-red-600 hover:text-red-800">
                                    <i class="fa-solid fa-trash-can"></i>
                                </button>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="exclusionCustomers.length === 0">
                        <td colspan="3" class="px-4 py-4 text-center text-sm text-gray-500">
                            除外得意先はありません
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- アクションボタン --}}
    <div class="flex justify-end gap-4">
        <x-button shape="btn-sub btn-secondary"
            text="リセット"
            @click="resetForm()" />
        <x-button shape="btn-main btn-primary"
            text="影響確認"
            @click="showPreview()"
            x-bind:disabled="!canPreview" />
    </div>

    {{-- プレビューモーダル --}}
    @include('user.sales-rep-schedules.partials.preview-modal')

</div>

{{-- 一括変更フォーム用スクリプト --}}
@include('user.sales-rep-schedules.scripts.bulk-change-component')