{{-- 個別変更タブコンテンツ --}}
<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="currentSalesRep" 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">
                <span>現在の担当者: </span>
                <span class="font-medium" x-text="currentSalesRep?.name || '-'"></span>
                <span class="text-gray-400 ml-2" x-text="currentSalesRep?.code ? '(' + currentSalesRep.code + ')' : ''"></span>
            </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')