{{-- 個別変更タブコンテンツ --}}
<div x-data="individualChangeForm()" x-init="init()">

    {{-- 入力フォーム --}}
    <div class="bg-white shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fa-solid fa-user-pen 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-customer
                            name="individual_customer_id"
                            suffix=".individual"
                            value="" />
                        <x-input.error item="customer_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="individual_new_sales_rep_id"
                            suffix=".individual_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="individual_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="individual_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="individual_note" rows="2" class="w-full input-text"
                            x-model="note" maxlength="500"></textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- 現在の担当者情報（得意先×大分類で分かれるため大分類ごとに並べる） --}}
        <div x-show="customerId" x-cloak class="mt-6 p-4 bg-gray-50 rounded-lg">
            <h4 class="text-sm font-medium text-gray-700 mb-2">
                <i class="fa-solid fa-info-circle mr-1"></i>
                現在の担当者情報
            </h4>
            <div class="text-sm text-gray-600">
                <template x-if="currentSalesReps.length === 0">
                    <span class="text-gray-400">この得意先には営業担当者が設定されていません。</span>
                </template>
                <template x-for="rep in currentSalesReps" :key="rep.category_id ?? 0">
                    <div class="flex items-center gap-2">
                        <span class="text-gray-500 w-40" x-text="rep.category_name"></span>
                        <span class="font-medium" x-text="rep.name || '-'"></span>
                    </div>
                </template>
            </div>
        </div>

        {{-- アクションボタン --}}
        <div class="flex justify-end gap-4 mt-6 pt-4 border-t">
            <x-button shape="btn-sub btn-secondary"
                text="リセット"
                @click="resetForm()" />
            <x-button shape="btn-main btn-primary"
                text="予約を登録"
                @click="submitForm()"
                x-bind:disabled="!canSubmit || processing" />
        </div>
    </div>

    {{-- 成功メッセージ --}}
    <div x-show="successMessage" x-cloak
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform translate-y-2"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50">
        <div class="flex items-center">
            <i class="fa-solid fa-check-circle mr-2"></i>
            <span x-text="successMessage"></span>
        </div>
    </div>

</div>

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