@extends('layout.main')
@section('content')
    <div class="container grid px-6 mx-auto">
        <h2 class="my-6 text-xl font-semibold text-gray-700 dark:text-gray-200 flex items-center justify-between">
            <span>{{ $botReport->title }} between {{ $botReport->period_from->format('d/m/Y') }} and
                {{ $botReport->period_to->format('d/m/Y') }}</span>
            <button onclick="exportReport()" class="bg-purple-600 text-white p-2 rounded">Export Report</button>
        </h2>
        <div class="w-full overflow-hidden rounded-lg shadow-xs">
            <div class="w-full overflow-x-auto">
                <x-tabs default-tab="tab1">
                    <!-- Tab Buttons -->
                    <x-slot name="buttons">
                        <button :class="{ 'active': tab === 'tab1' }" @click="setTab('tab1')"><span
                                class='dark:text-white'>MSP2_01</span></button>
                        <button :class="{ 'active': tab === 'tab2' }" @click="setTab('tab2')"><span
                                class='dark:text-white'>MSP2_02</span></button>
                        <button :class="{ 'active': tab === 'tab3' }" @click="setTab('tab3')"><span
                                class='dark:text-white'>MSP2_03</span></button>
                        <button :class="{ 'active': tab === 'tab4' }" @click="setTab('tab4')"><span
                                class='dark:text-white'>MSP2_04</span></button>
                        <button :class="{ 'active': tab === 'tab5' }" @click="setTab('tab5')"><span
                                class='dark:text-white'>MSP2_05</span></button>
                        <button :class="{ 'active': tab === 'tab6' }" @click="setTab('tab6')"><span
                                class='dark:text-white'>MSP2_06</span></button>
                        <button :class="{ 'active': tab === 'tab7' }" @click="setTab('tab7')"><span
                                class='dark:text-white'>MSP2_07</span></button>
                        <button :class="{ 'active': tab === 'tab8' }" @click="setTab('tab8')"><span
                                class='dark:text-white'>MSP2_08</span></button>
                        <button :class="{ 'active': tab === 'tab9' }" @click="setTab('tab9')"><span
                                class='dark:text-white'>MSP2_09</span></button>
                        <button :class="{ 'active': tab === 'tab10' }" @click="setTab('tab10')"><span
                                class='dark:text-white'>MSP2_10</span></button>
                    </x-slot>

                    <!-- Tab Content -->
                    <x-slot name="content">
                        <div x-show="tab === 'tab1'" class="p-4">
                            @include('bot-reports.exports.msp2_01')
                        </div>
                        <div x-show="tab === 'tab2'" class="p-4">
                            @include('bot-reports.exports.msp2_02')
                        </div>
                        <div x-show="tab === 'tab3'" class="p-4">
                            @include('bot-reports.exports.msp2_03')
                        </div>
                        <div x-show="tab === 'tab4'" class="p-4">
                            @include('bot-reports.exports.msp2_04')
                        </div>
                        <div x-show="tab === 'tab5'" class="p-4">
                            @include('bot-reports.exports.msp2_05')
                        </div>
                        <div x-show="tab === 'tab6'" class="p-4">
                            @include('bot-reports.exports.msp2_06')
                        </div>
                        <div x-show="tab === 'tab7'" class="p-4">
                            @include('bot-reports.exports.msp2_07')
                        </div>
                        <div x-show="tab === 'tab8'" class="p-4">
                            @include('bot-reports.exports.msp2_08')
                        </div>
                        <div x-show="tab === 'tab9'" class="p-4">
                            @include('bot-reports.exports.msp2_09')
                        </div>
                        <div x-show="tab === 'tab10'" class="p-4">
                            @include('bot-reports.exports.msp2_10')
                        </div>
                    </x-slot>
                </x-tabs>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function exportReport() {
            exportTablesToExcel(
                ['#msp2_01','#msp2_02', '#msp2_03', '#msp2_04', '#msp2_05', '#msp2_06',
                    '#msp2_07', '#msp2_08', '#msp2_09', '#msp2_10'
                ],
                ['MSP2_01', 'MSP2_02', 'MSP2_03', 'MSP2_04', 'MSP2_05', 'MSP2_06', 'MSP2_07',
                    'MSP2_08', 'MSP2_09', 'MSP2_10'
                ],
                'BotReport.xlsx'
            );
        }
    </script>
@endpush