<template>
    <div class="container-fluid">
        <!-- Breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">LadaDateRangePicker Demo</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Demo</li>
                </ol>
            </div>
        </div>

        <!-- Demo 1: Basic Usage -->
        <div class="row row-sm">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">1. Basic Date Range Picker</h5>
                    </div>
                    <div class="card-body">
                        <label class="form-label">Chọn khoảng thời gian</label>
                        <LadaDateRangePicker ref="basicPicker" v-model="basicDate"
                            @update:model-value="handleBasicChange" />
                        <div class="mt-3" v-if="basicDate">
                            <strong>Kết quả:</strong>
                            <pre>{{ JSON.stringify(basicDate, null, 2) }}</pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Demo 2: With Min Date -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">2. With Min Date (10/08/2025)</h5>
                    </div>
                    <div class="card-body">
                        <label class="form-label">Chọn khoảng thời gian</label>
                        <LadaDateRangePicker v-model="minDateValue" :min-date="new Date(2025, 7, 10)"
                            @update:model-value="handleMinDateChange" />
                        <div class="mt-3" v-if="minDateValue">
                            <strong>Kết quả:</strong>
                            <pre>{{ JSON.stringify(minDateValue, null, 2) }}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Demo 3 & 4 -->
        <div class="row row-sm">
            <!-- Demo 3: Single Date -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">3. Single Date (không phải range)</h5>
                    </div>
                    <div class="card-body">
                        <label class="form-label">Chọn một ngày</label>
                        <LadaDateRangePicker v-model="singleDate" :range="false" :multi-calendars="false"
                            placeholder="Chọn một ngày..." @update:model-value="handleSingleDateChange" />
                        <div class="mt-3" v-if="singleDate">
                            <strong>Kết quả:</strong>
                            <pre>{{ JSON.stringify(singleDate, null, 2) }}</pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Demo 4: With Time Picker -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">4. With Time Picker</h5>
                    </div>
                    <div class="card-body">
                        <label class="form-label">Chọn ngày và giờ</label>
                        <LadaDateRangePicker v-model="dateTimeValue" :enable-time-picker="true" :show-sidebar="false"
                            @update:model-value="handleDateTimeChange" />
                        <div class="mt-3" v-if="dateTimeValue">
                            <strong>Kết quả:</strong>
                            <pre>{{ JSON.stringify(dateTimeValue, null, 2) }}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Demo 5: Trong Form -->
        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">5. Trong Form Tìm Kiếm</h5>
                    </div>
                    <div class="card-body">
                        <form @submit.prevent="handleSearch">
                            <div class="row">
                                <div class="col-lg-4 col-md-6 mb-3">
                                    <label class="form-label">Từ khóa</label>
                                    <input type="text" v-model="searchModel.keyword" class="form-control"
                                        placeholder="Nhập từ khóa...">
                                </div>

                                <div class="col-lg-4 col-md-6 mb-3">
                                    <label class="form-label">Khoảng thời gian</label>
                                    <LadaDateRangePicker ref="searchDatePicker" v-model="searchDate"
                                        @update:model-value="handleSearchDateChange" />
                                </div>

                                <div class="col-lg-4 col-md-6 mb-3">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button type="submit" class="btn btn-dark">
                                            <i class="fe fe-search"></i>
                                            <span>Tìm kiếm</span>
                                        </button>
                                        <button type="button" class="btn btn-secondary ms-2" @click="resetSearch">
                                            <i class="fe fe-refresh-cw"></i>
                                            <span>Reset</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div class="mt-3" v-if="searchResult">
                            <div class="alert alert-info">
                                <strong>Search Model:</strong>
                                <pre>{{ JSON.stringify(searchModel, null, 2) }}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useToast } from "vue-toastification"

const toast = useToast()

// Demo 1: Basic
const basicDate = ref()
const basicPicker = ref(null)

const handleBasicChange = (dates) => {
    console.log('Basic dates:', dates)
    toast.success('Đã chọn khoảng thời gian!')
}

// Demo 2: Min Date
const minDateValue = ref()

const handleMinDateChange = (dates) => {
    console.log('Min date dates:', dates)
}

// Demo 3: Single Date
const singleDate = ref()

const handleSingleDateChange = (date) => {
    console.log('Single date:', date)
}

// Demo 4: With Time
const dateTimeValue = ref()

const handleDateTimeChange = (dates) => {
    console.log('DateTime:', dates)
}

// Demo 5: Form
const searchDate = ref()
const searchDatePicker = ref(null)
const searchResult = ref(false)

const searchModel = reactive({
    keyword: '',
    startDate: null,
    endDate: null
})

const handleSearchDateChange = (dates) => {
    if (dates && Array.isArray(dates)) {
        searchModel.startDate = dates[0]
        searchModel.endDate = dates[1]
    } else {
        searchModel.startDate = null
        searchModel.endDate = null
    }
}

const handleSearch = () => {
    searchResult.value = true
    toast.success('Tìm kiếm thành công!')
    console.log('Searching with:', searchModel)
}

const resetSearch = () => {
    searchModel.keyword = ''
    searchModel.startDate = null
    searchModel.endDate = null
    searchDate.value = null
    searchResult.value = false
    toast.info('Đã reset form!')
}
</script>

<style scoped>
pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
</style>
