@extends('layouts.admin.main')
@section('title', __('Program'))

@section('style')
<link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .search-box {
        position: relative;
    }
    .search-box .form-control {
        padding-right: 35px;
    }
    .search-box .search-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
    }
    #table-container {
        min-height: 400px;
    }
    .pagination {
        margin-bottom: 0;
    }
    .page-link {
        cursor: pointer;
    }
    .dt-buttons {
        display: none !important;
    }
</style>
@endsection

@section('rightbar-content')
<div class="breadcrumbbar">
    <div class="row align-items-center">
        <div class="col-md-8 col-lg-8">
            <h4 class="page-title">All Programs</h4>
            <div class="breadcrumb-list">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/admin') }}">{{ __('adminWords.home') }}</a></li>
                    <li class="breadcrumb-item active">Programs</li>
                </ol>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="widgetbar text-right">
                <div class="btn-group mr-2">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Export
                    </button>
                    <div class="dropdown-menu">
                        <button class="dropdown-item export-copy" type="button">Copy</button>
                        <button class="dropdown-item export-csv" type="button">CSV</button>
                        <button class="dropdown-item export-excel" type="button">Excel</button>
                        <button class="dropdown-item export-pdf" type="button">Print</button>
                    </div>
                </div>            
                <a class="btn btn-danger" href="{{ route('program_create') }}">
                    <i class="feather icon-plus mr-2"></i>Create Program
                </a>
            </div>
        </div>
    </div>
</div>

<div class="contentbar">
    <div class="row">
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h5 class="card-title mb-0">Program List</h5>
                        </div>
                        <div class="col-md-6">
                            <div class="search-box">
                                <input 
                                    type="text" 
                                    id="search-input" 
                                    class="form-control" 
                                    placeholder="Search by program name or slug..."
                                    value="{{ request('search') }}">
                                <i class="feather icon-search search-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="table-container">
                        @include('album::program.partials.table')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<script>
$(document).ready(function() {
    let programTable = null;
    
    // Initialize DataTable with export functionality
    function initDataTable() {
        if (programTable) {
            programTable.destroy();
        }
        
        var exportFormatBody = function(data, row, column, node){
            try{
                if(node){
                    var $node = $(node);
                    // Status column (5) -> show Active/Inactive
                    if(column === 5){
                        var $chk = $node.find('input.status-switch');
                        if($chk.length){
                            return $chk.is(':checked') ? 'Active' : 'Inactive';
                        }
                    }
                    // Image column (1) - return src
                    if(column === 1){
                        var $img = $node.find('img');
                        if($img.length){
                            return $img.attr('src') || '';
                        }
                    }
                    return $node.text().trim();
                }
            }catch(e){ }
            return $('<div/>').html(data).text().trim();
        };
        
        programTable = $('.table').DataTable({
            "lengthChange": false,
            "searching": false,
            "paging": false,
            "info": false,
            dom: 'Bfrtip',
            columnDefs: [
                { orderable: false, targets: [0,1,6] }
            ],
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: [2,3,4],
                        format: { body: exportFormatBody }
                    }
                },
                {
                    extend: 'csvHtml5',
                    title: 'Disrupt_programs_'+ new Date().toLocaleDateString(),
                    exportOptions: {
                        columns: [2,3,4],
                        format: { body: exportFormatBody }
                    }
                },
                {
                    extend: 'excelHtml5',
                    title: 'Disrupt_programs_'+ new Date().toLocaleDateString(),
                    exportOptions: {
                        columns: [2,3,4],
                        format: { body: exportFormatBody }
                    }
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Disrupt_programs_'+ new Date().toLocaleDateString(),
                    exportOptions: {
                        columns: [2,3,4],
                        format: { body: exportFormatBody }
                    }
                }
            ]
        });
    }
    
    // Export button handlers
    $('.export-csv').click(function(){
        $('.buttons-csv').trigger('click');
    });
    $('.export-copy').click(function(){
        $('.buttons-copy').trigger('click');
    });
    $('.export-excel').click(function(){
        $('.buttons-excel').trigger('click');
    });
    $('.export-pdf').click(function(){
        $('.buttons-pdf').trigger('click');
    });
    
    // Initialize on page load
    initDataTable();
    let searchTimeout;
    
    // Search functionality
    $('#search-input').on('keyup', function() {
        clearTimeout(searchTimeout);
        const searchValue = $(this).val();
        
        searchTimeout = setTimeout(function() {
            loadPrograms(searchValue, 1);
        }, 500); // Debounce for 500ms
    });
    
    // Load programs via AJAX
    function loadPrograms(search = '', page = 1) {
        $.ajax({
            url: '{{ route("program") }}',
            type: 'GET',
            data: {
                search: search,
                page: page
            },
            beforeSend: function() {
                $('#table-container').css('opacity', '0.5');
            },
            success: function(response) {
                $('#table-container').html(response);
                $('#table-container').css('opacity', '1');
                
                // Reinitialize DataTable after AJAX load
                initDataTable();
                
                // Update URL without reloading
                const url = new URL(window.location);
                if (search) {
                    url.searchParams.set('search', search);
                } else {
                    url.searchParams.delete('search');
                }
                if (page > 1) {
                    url.searchParams.set('page', page);
                } else {
                    url.searchParams.delete('page');
                }
                window.history.pushState({}, '', url);
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to load programs. Please try again.'
                });
                $('#table-container').css('opacity', '1');
            }
        });
    }
    
    // Pagination click handler
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        const url = $(this).attr('href');
        if (!url) return;
        
        const page = new URL(url).searchParams.get('page') || 1;
        const search = $('#search-input').val();
        
        loadPrograms(search, page);
        
        // Scroll to top of table
        $('html, body').animate({
            scrollTop: $('#table-container').offset().top - 100
        }, 300);
    });
    
    // Status toggle handler
    $(document).on('change', '.status-switch', function() {
        const programId = $(this).data('id');
        const status = $(this).is(':checked') ? 1 : 0;
        const switchElement = $(this);
        
        $.ajax({
            url: '{{ route("change_program_status") }}',
            type: 'POST',
            data: {
                id: programId,
                status: status,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: 'Program status updated successfully',
                    timer: 2000,
                    showConfirmButton: false
                });
            },
            error: function() {
                // Revert the switch on error
                switchElement.prop('checked', !status);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to update program status'
                });
            }
        });
    });
    
    // Delete handler
    $(document).on('click', '.program-delete', function(e) {
        e.preventDefault();
        const programId = $(this).data('id');
        const row = $(this).closest('tr');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("delete_program") }}',
                    type: 'POST',
                    data: {
                        id: programId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Deleted!',
                            text: 'Program has been deleted.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        
                        // Reload the current page
                        const search = $('#search-input').val();
                        const currentPage = new URL(window.location).searchParams.get('page') || 1;
                        loadPrograms(search, currentPage);
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to delete program'
                        });
                    }
                });
            }
        });
    });
});
</script>
@endsection