<x-ui.modals type="form-modal" id="editCampaignKOCModal" title="Sửa KOC trong chiến dịch" formId="editKOCForm" submitLabel="Lưu thay đổi" size="lg">
    <form id="editKOCForm" class="modal-form" @submit.prevent="handleSubmitEditKOC">
        <input type="hidden" name="campaign_koc_id" x-model="editForm.id" />

        <div class="modal-form-grid">
            <div class="form-section full-width">
                <h3 x-text="editForm.type === 'video' ? 'Thông tin KOC & Video' : 'Thông tin KOC & Live'"></h3>
                <div class="form-row four-col">
                    <label>
                        <span>Tên KOC</span>
                        <input type="text" name="creator_name" class="modal-input" x-model="editForm.creator_name" readonly />
                    </label>
                    <label>
                        <span>Tham gia</span>
                        <input type="text" name="created_at" class="modal-input" x-model="editForm.created_at" readonly />
                    </label>
                    <label>
                        <span>Người phụ trách</span>
                        <select name="assigned_to_id" class="modal-input" x-model="editForm.assigned_to_id">
                            <option value="">—</option>
                            <template x-for="(name, id) in ownerMap" :key="id">
                                <option :value="id" x-text="name"></option>
                            </template>
                        </select>
                    </label>
                    <label x-show="editForm.type === 'video'">
                        <span>Số video</span>
                        <input type="number" name="number_of_videos" class="modal-input" x-model="editForm.number_of_videos" min="0" />
                    </label>
                    <label x-show="editForm.type === 'livestream'">
                        <span>Trạng thái</span>
                        <select name="status" class="modal-input" x-model="editForm.status">
                            @foreach (\App\Enums\BookingStatus::kocOptions() as $option)
                                <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                            @endforeach
                        </select>
                    </label>
                </div>
                <div class="form-row four-col" x-show="editForm.type === 'video'">
                    <label>
                        <span>Trạng thái</span>
                        <select name="status" class="modal-input" x-model="editForm.status">
                            @foreach (\App\Enums\BookingStatus::kocOptions() as $option)
                                <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>
                        <span>% AFF tự nhiên</span>
                        <input type="text" name="engagement_natural" class="modal-input numeric numeric-format" x-model="editForm.engagement_natural" @input="window.onNumberInput($event)" />
                    </label>
                    <label>
                        <span>% AFF Ads</span>
                        <input type="text" name="engagement_ads" class="modal-input numeric numeric-format" x-model="editForm.engagement_ads" @input="window.onNumberInput($event)" />
                    </label>
                    <label>
                        <span>Ngày chốt air video</span>
                        <input type="date" name="air_date" class="modal-input" x-model="editForm.air_date" />
                    </label>
                </div>
                <div class="form-row four-col" x-show="editForm.type === 'livestream'">
                    <label>
                        <span>% AFF tự nhiên</span>
                        <input type="text" name="engagement_natural" class="modal-input numeric numeric-format" x-model="editForm.engagement_natural" @input="window.onNumberInput($event)" />
                    </label>
                    <label>
                        <span>% AFF Ads</span>
                        <input type="text" name="engagement_ads" class="modal-input numeric numeric-format" x-model="editForm.engagement_ads" @input="window.onNumberInput($event)" />
                    </label>
                    <label>
                        <span>Phân loại mẫu</span>
                        <input type="text" name="sample_type" class="modal-input" x-model="editForm.sample_type" />
                    </label>
                    <label>
                        <span>Đăng ký deal live</span>
                        <input type="text" name="deal_live_registration" class="modal-input" x-model="editForm.deal_live_registration" />
                    </label>
                </div>
            </div>

            <div class="form-section full-width">
                <h3>Chi phí & Mốc thời gian</h3>
                <div class="form-row four-col">
                    <label>
                        <span>Báo giá</span>
                        <input type="text" name="price_quote" class="modal-input numeric numeric-format" x-model="editForm.price_quote" @input="window.onNumberInput($event)" />
                    </label>
                    <label>
                        <span>Chi phí cast</span>
                        <input type="text" name="cast_cost" class="modal-input numeric numeric-format" x-model="editForm.cast_cost" @input="window.onNumberInput($event)" />
                    </label>
                    <label>
                        <span>Chi phí mẫu</span>
                        <input type="text" name="sample_cost" class="modal-input numeric numeric-format" x-model="editForm.sample_cost" @input="window.onNumberInput($event)" />
                    </label>
                    <label>
                        <span>Chi phí ship</span>
                        <input type="text" name="shipping_cost" class="modal-input numeric numeric-format" x-model="editForm.shipping_cost" @input="window.onNumberInput($event)" />
                    </label>
                </div>
                <div class="form-row three-col">
                    <label>
                        <span>Mã đơn hàng</span>
                        <input type="text" name="order_code" class="modal-input" x-model="editForm.order_code" />
                    </label>
                    <label>
                        <span>Ngày gửi sản phẩm</span>
                        <input type="date" name="send_date" class="modal-input" x-model="editForm.send_date" />
                    </label>
                    <label>
                        <span>Dự kiến nhận</span>
                        <input type="date" name="eta_date" class="modal-input" x-model="editForm.eta_date" />
                    </label>
                </div>
            </div>
        </div>
    </form>
</x-ui.modals>
