@extends('admin.layouts.masterlayout')

@section('title', "Event Management")
@section('head_title', "Event Management")

@section('content')
<div class="dashboard-body-content">

    <div class="manage-offers-flex">
        <div class="admin-tab-container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#competition" data-tab="competition">Competition</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#tutorial" data-tab="tutorial">Tutorial</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#live-stream" data-tab="live-stream">Live Stream</a>
                </li>
            </ul>
        </div>
        <div class="d-flex gap-3 align-items-center manage-search-container">
            <div class="position-relative w-100">
                <input type="search" class="form-control search_text" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                </div>
            </div>
            <a href="#" id="dynamicButton" class="ct-btn text-center add-ct-btn max-width-fit-con" data-competition-route="{{ route('admin.createCompetition',['tab' => 'competition']) }}" data-tutorial-route="{{ route('admin.createTutorial',['tab' => 'tutorial']) }}" data-livestream-route="{{ route('admin.createLive_stream',['tab' => 'live-stream']) }}">Add Event</a>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane jp" id="competition">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="competitionTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>User</th>
                                    <th>Type</th>
                                    <th>Fee</th>
                                    <th>Assigned to</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane jp" id="tutorial">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="tutorialTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>User</th>
                                    <th>Type</th>
                                    <th>Description</th>
                                    <th>Fee</th>
                                    <!-- <th>Video</th> -->
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane jp" id="live-stream">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="liveStreamTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>User</th>
                                    <th>Type</th>
                                    <th>Description</th>
                                    <th>Start Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    $(document).ready(function() {
        // === COMPETITION DATATABLE ===
        const competitionTable = $('#competitionTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: '{{ route("admin.getCompetitionData") }}',
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'user',
                    name: 'user'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'fee',
                    name: 'fee'
                },
                {
                    data: 'assign_to',
                    name: 'assign_to'
                },
                {
                    data: 'start_time',
                    name: 'start_time'
                },
                {
                    data: 'end_time',
                    name: 'end_time'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // === TUTORIAL DATATABLE ===
        const tutorialTable = $('#tutorialTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: '{{ route("admin.getTutorialData") }}',
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'user',
                    name: 'user'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'fee',
                    name: 'fee'
                },
                // {
                //     data: 'video',
                //     name: 'video'
                // },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // // === LIVE STREAM DATATABLE ===
        const liveStreamTable = $('#liveStreamTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: '{{ route("admin.getLiveStreamData") }}',
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'user',
                    name: 'user'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'start_time',
                    name: 'start_time'
                },
                 {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // === SHARED SEARCH LOGIC ===
        $('.manage-search-container input[type="search"]').on('input', function() {
            const activeTab = $('.tab-pane.jp.active').attr('id');
            const searchText = $(this).val();

            if (activeTab === 'competition') {
                competitionTable.search(searchText).draw();
            } else if (activeTab === 'tutorial') {
                tutorialTable.search(searchText).draw();
            } else if (activeTab === 'live-stream') {
                liveStreamTable.search(searchText).draw();
            }
        });

        // Dynamic button logic to change the 'Add Event' link
        function updateDynamicButton(tab) {
            const $button = $('#dynamicButton');
            if (tab === 'competition') {
                $button.text('Add Competition');
                $button.attr('href', $button.data('competition-route'));
            } else if (tab === 'tutorial') {
                $button.text('Add Tutorial');
                $button.attr('href', $button.data('tutorial-route'));
            } else {
                $button.text('Add Live Stream');
                $button.attr('href', $button.data('livestream-route'));
            }
        }

        var tab = getUrlParameter('tab') || 'competition';

        // Activate correct tab
        $('.jp_link').removeClass('active');
        $('.jp').removeClass('active show');
        $('.jp_link[data-tab="' + tab + '"]').addClass('active');
        $('#' + tab).addClass('active show');

        updateDynamicButton(tab);

        $('.jp_link').on('click', function(e) {
            var selectedTab = $(this).data('tab');
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + selectedTab;
            window.history.pushState({
                path: newUrl
            }, '', newUrl);

            $('.jp_link').removeClass('active');
            $(this).addClass('active');
            $('.jp').removeClass('active show');
            $('#' + selectedTab).addClass('active show');

            updateDynamicButton(selectedTab);
        });

        // === DELETE ROLE AND AdminUser LOGIC ===


        $(document).on('click', '.delete_competition, .delete_tutorial, .delete_livestream', function() {
            var id = $(this).attr("data-id");
            var type = $(this).attr("data-type");


            $(".tattoo-delete-btn").attr('data-deleted-id', id);
            $(".tattoo-delete-btn").attr('data-delete-type', type);
            $('.tattoo-delete-modal').modal('show');
        });

        $(document).on('click', '.tattoo-delete-btn', function() {
            var id = $(this).attr("data-deleted-id");
            var type = $(this).attr("data-delete-type");

            if (id !== "" && id != 0) {
                $('.tattoo-delete-btn').attr('disabled', true).addClass('loader-active');

                let deleteUrl = "";
                let dataPayload = {};

                if (type === "competition") {
                    deleteUrl = "{{ route('admin.deleteCompetition') }}";
                    dataPayload = {
                        competition_id: id
                    };
                } else if (type === "tutorial") {
                    deleteUrl = "{{ route('admin.deleteTutorial') }}";
                    dataPayload = {
                        tutorial_id: id
                    };
                } else if (type === "livestream") {
                    deleteUrl = "{{ route('admin.deleteLiveStream') }}";
                    dataPayload = {
                        livestream_id: id
                    };
                }

                $.ajax({
                    type: "POST",
                    url: deleteUrl,
                    data: dataPayload,
                    success: function(response) {

                        $('.tattoo-delete-modal').modal('hide');
                        $('.tattoo-delete-btn').removeAttr('disabled').removeClass('loader-active');

                        if (response.status === true) {
                            // Clear search input and reset filters
                            // $('.manage-search-container input[type="search"]').val('');

                            if (type === "competition") {

                                if (competitionTable.rows({
                                        page: 'current'
                                    }).count() === 1) {
                                    competitionTable.page('previous').draw('page');
                                } else {
                                    competitionTable.ajax.reload(null, false);
                                }
                            } else if (type === "tutorial") {

                                if (tutorialTable.rows({
                                        page: 'current'
                                    }).count() === 1) {
                                    tutorialTable.page('previous').draw('page');
                                } else {
                                    tutorialTable.ajax.reload(null, false);
                                }
                            }else if (type === "livestream") {

                                if (liveStreamTable.rows({
                                        page: 'current'
                                    }).count() === 1) {
                                    liveStreamTable.page('previous').draw('page');
                                } else {
                                    liveStreamTable.ajax.reload(null, false);
                                }
                            }

                            custom_message('success', response.message);
                        } else {
                            custom_message('error', response.message);
                        }
                    }
                });
            } else {
                custom_message('error', "ID isn't valid");
            }
        });


    });
</script>
@endsection