@props([
    'id' => 'creatorModal',
    'title' => 'Thêm KOL / KOC',
    'formId' => 'creatorForm',
    'submitLabel' => 'Lưu',
    'mode' => 'create', // create | edit
])

<x-ui.modals type="modal" id="{{ $id }}" title="{{ $title }}" size="md">
    <form id="{{ $formId }}" class="modal-form" novalidate>
        @if($mode === 'edit')
            <input type="hidden" name="creator_id" id="{{ $id }}-creator-id" />
        @endif

        <div class="modal-form-grid">
            {{-- Thông tin cơ bản --}}
            <div class="form-section">
                <h3>Thông tin cơ bản *</h3>
                <label>
                    <span>Tên KOL / Creator *</span>
                    <input type="text" name="creator_name" placeholder="Nhập tên creator" required />
                </label>
                <label>
                    <span>CID TikTok</span>
                    <input type="text" name="tiktok_cid" placeholder="Nhập CID TikTok" />
                </label>
            </div>

            {{-- Thông tin liên hệ --}}
            <div class="form-section">
                <h3>Thông tin liên hệ</h3>
                <div class="form-row two-col">
                    <label>
                        <span>Số điện thoại</span>
                        <input type="text" name="contact_phone" placeholder="0xxx.xxx.xxx" />
                    </label>
                    <label>
                        <span>Email</span>
                        <input type="email" name="contact_email" placeholder="example@email.com" />
                    </label>
                </div>
                <div class="form-row two-col">
                    <label>
                        <span>Zalo</span>
                        <input type="text" name="contact_zalo" placeholder="Zalo number" />
                    </label>
                    <label>
                        <span>Địa chỉ</span>
                        <input type="text" name="address" placeholder="Nhập địa chỉ" />
                    </label>
                </div>
            </div>

            {{-- Liên kết mạng xã hội --}}
            <div class="form-section full-width">
                <h3>Liên kết mạng xã hội</h3>
                <div class="form-row three-col">
                    <label>
                        <span>TikTok Link</span>
                        <input type="url" name="tiktok_link" placeholder="https://www.tiktok.com/@..." />
                    </label>
                    <label>
                        <span>Instagram Link</span>
                        <input type="url" name="instagram_link" placeholder="https://www.instagram.com/..." />
                    </label>
                    <label>
                        <span>Facebook Link</span>
                        <input type="url" name="facebook_link" placeholder="https://www.facebook.com/..." />
                    </label>
                </div>
            </div>

            {{-- Chỉ số hiệu năng & Nội dung --}}
            <div class="form-section full-width">
                <h3>Chỉ số & Nội dung</h3>
                <div class="form-row four-col">
                    <label>
                        <span>Followers</span>
                        <input type="text" name="followers" class="numeric numeric-format" placeholder="0" @input="window.onNumberInput($event)" required />
                    </label>
                    <label>
                        <span>GMV</span>
                        <input type="text" name="gmv" class="numeric numeric-format" placeholder="0" @input="window.onNumberInput($event)" required />
                    </label>
                    <label>
                        <span>Số sp đã bán</span>
                        <input type="text" name="items" class="numeric numeric-format" placeholder="0" @input="window.onNumberInput($event)" required />
                    </label>
                    <label>
                        <span>View TB</span>
                        <input type="text" name="average_views" class="numeric numeric-format" placeholder="0" @input="window.onNumberInput($event)" />
                    </label>
                </div>
                <div class="form-row three-col">
                    <label>
                        <span>Lợi thế</span>
                        <input type="text" name="advantages" placeholder="Video (xx%), Livestream (xx%)" />
                    </label>
                    <label>
                        <span>Tệp khách hàng</span>
                        <input type="text" name="audience" placeholder="Nu 18-30;Me bim" />
                    </label>
                    <label>
                        <span>Content</span>
                        <textarea name="content" rows="1" placeholder="Loại nội dung / Content"></textarea>
                    </label>
                </div>
            </div>

            {{-- Ghi chú --}}
            <div class="form-section full-width no-heading">
                <label>
                    <span>Ghi chú</span>
                    <textarea name="notes" rows="2" placeholder="Ghi chú thêm"></textarea>
                </label>
            </div>
        </div>
    </form>

    <x-slot name="footer">
        <button type="button" class="btn btn-cancel" @click="hide()">
            <x-fas-times />
            <span>Hủy</span>
        </button>
        <button type="submit" class="btn btn-save" form="{{ $formId }}">
            <x-fas-save />
            <span>{{ $submitLabel }}</span>
        </button>
    </x-slot>
</x-ui.modals>
