@extends('admin.layouts.default')
@section('title', 'Website')
@section('content')
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('users-list'))
                <div class="d-flex align-items-center">
                    <input type="text" id="websiteDropdown" class="form-control me-2" placeholder="Search Website" website style="max-width: 200px;">
                    <!-- <select id="websiteDropdown" name="website" class="form-select me-2" style="max-width: 200px;">
                        <option value="">Select Website</option>
                        @foreach($websites as $website)
                            <option value="{{ $website->website }}">{{ $website->website }}</option>
                        @endforeach
                    </select> -->
                    <!-- <input type="text" id="userSearchInput" class="form-control me-2" placeholder="Search Website" style="max-width: 250px;"> -->
                    <input type="text" id="titleSearchInput" class="form-control me-2" placeholder="Search Title" style="max-width: 200px;">

                    <!-- Input for Email -->
                    <input type="text" id="emailSearchInput" class="form-control me-2" placeholder="Search Email" style="max-width: 200px;">

                    <select id="statusDropdown" name="status" class="form-select me-2" style="max-width: 200px;">
                        <option value="">Select Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>

                    <button type="button" id="userFilterButton" class="btn btn-primary">Filter</button>
                    <button type="button" id="refreshFilterButton" class="btn btn-secondary ms-2">Reset</button>
                
                </div>
            @endif
            <h1 class="page-title mb-0 text-primary"></h1>
            <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
                <div class="page-rightheader">
                    <div>
                        @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('website-create'))
                            <a href="{{ url('website-create') }}">
                                <button type="button" class="btn btn-outline-primary me-1">
                                    <i class="fa fa-plus"></i>
                                    Add website
                                </button>
                            </a>
                        @endif

                    </div>
                </div>
            </div>
        </div>

        <div class="card ">
            <div class="card-header justify-content-between">
                <h3 class="card-title">
                    Websites
                </h3>

            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="website_data_table" class="table text-nowrap table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">S.no</th>
                                <th scope="col">Title</th>
                                <th scope="col">Email</th>
                                <th scope="col">Website</th>
                                <th scope="col">token</th>
                                <th scope="col">status</th>
                                <th scope="col">logo</th>
                                <th scope="col">action</th>

                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>


        </div>

    </div>
</div>

<script>
    var isSuperAdmin = @json(auth()->user()->hasRole('Superadmin'));
    var canCreateUsers = @json(auth()->user()->can('academic-create'));
</script>

<script>
   
    $(document).ready(function() {
        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/website-list',  // Your API endpoint
                data: function(d) {
                    // Add the role_name parameter from the input field to the request payload
                    d.web_name = $('#userSearchInput').val();  
                    d.web_name = $('#userSearchInput').val();
                    d.title = $('#titleSearchInput').val(); // Add title filter
                    d.email = $('#emailSearchInput').val(); // Add email filter
                    d.website = $('#websiteDropdown').val();
                    d.status = $('#statusDropdown').val();
                }
            },
            columns: [
                {
                    data: null, // Use null to generate the row number
                    name: 'row_number',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1; // Calculate the row number
                    }
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'website',
                    name: 'website'
                },
                {
                    data: 'token',
                    name: 'token'
                },
                {
                    data: 'status',
                    name: 'status',
                    render: function(data) {
                        return data == 1 ?
                            '<button type="button" class="btn btn-success-light btn-wave waves-effect waves-light">Active</button>' :
                            '<button type="button" class="btn btn-danger-light btn-wave waves-effect waves-light">Inactive</button>';
                    }
                },
                {
                    data: 'logo',
                    name: 'logo'
                },
                {
                    data: null,
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                    // Initialize buttons variable
                    var buttons = '';
        
                    // Check if the user is a SuperAdmin
                    if (isSuperAdmin) {
                        buttons += `
                            <a href="${base_url}/website-edit/${row.id}" class="btn btn-primary btn-sm edit-button" 
                            title="Edit" data-id="${row.id}">
                                <i class="ri-edit-line"></i>
                            </a>
                        `;
                        buttons += `
                            <button type="button" class="btn btn-danger btn-sm delete-button" data-id="${row.id}">
                                <i class="ri-delete-bin-5-line"></i>
                            </button>
                        `;
                    }
                    if (row.status != 0 || isSuperAdmin) {
                        buttons += `
                            <a href="${base_url}/website-dashboard/${row.id}" class="btn btn-primary btn-sm" 
                                title="dashboard-detail" data-id="${row.id}">
                                    <i class="ti-home"></i>
                            </a>
                        `;
                    }
                    if (isSuperAdmin) {
                        buttons += `
                            <button type="button" class="btn btn-primary website-clone btn-sm" data-id="${row.id}">
                                <i class="fe fe-copy"></i>
                            </button>
                        `;
                    }

                    // Return the generated buttons (or empty string if not a SuperAdmin)
                    return buttons || ''; // return empty string if no buttons
                }
            }],
            searching: false,
            ordering: false


        });

        $('#add-mod').on('click', function() {
            clearErrors();
            clearForm();
            $('#website-id').val('');
            $('#submit-button').text('Save Changes');
            $('#exampleModalScrollable3').modal('show');
        });

        function clearForm() {
            $('#websiteForm')[0].reset();
        }

        function clearErrors() {
            $('#error-website').text('');
            $('#error-status').text('');
            $('#error-logo').text('');
        }
    
    });
</script>
<script>
    $('#website_data_table').on('click', '.delete-button', function(e) {
        e.preventDefault();

        var id = $(this).data('id');
        // console.log(id);

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!'
        }).then((result) => {
            if (result.isConfirmed) {
                var url = base_url + '/website-delete/' + id;

                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire('Success!', 'Item deleted successfully.', 'success');

                        $('#website_data_table').DataTable().ajax.reload();
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', 'Error deleting item.', 'error');
                    }
                });
            }
        });
    });

    // Filter button click event
    $('#userFilterButton').on('click', function() {
        console.log('Filter parameters:', {
            website: $('#websiteDropdown').val(),
            title: $('#titleSearchInput').val(),
            email: $('#emailSearchInput').val(),
            status: $('#statusDropdown').val()
        });
        
        // Reload DataTable to apply filters
        $('#website_data_table').DataTable().ajax.reload();
    });

    // Real-time search (optional, if you want to trigger the search on keyup)
    // $('#userFilterButton').on('click', function() {
    //     $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable to reflect changes
    // });

     $('#refreshFilterButton').on('click', function() {
        // Clear the search input and reset the dropdown
        $('#userSearchInput').val(''); 
        $('#assignToFilter').val('');  
        $('#websiteDropdown').val(''); 
        $('#titleSearchInput').val('');
        $('#emailSearchInput').val('');
        $('#statusDropdown').val('');

        // Reload the DataTable with the cleared filters
        $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable to reflect changes
    });
   
    $('#website_data_table').on('click', '.edit-button', function(event) {
        var id = $(this).data('id'); 
        const url = $(this).attr('href'); 
        if (event.ctrlKey) {
            
            return; 
        } 
    });
    function showToast(message) {
        var toastEl = document.getElementById('topright-Toast');
        var toast = new bootstrap.Toast(toastEl);
        toastEl.querySelector('.toast-body').textContent = message;
        toast.show();
        
    }
    // $(document).on('click', '.website-clone', function() {
    //     var id = $(this).data('id'); // Get the row ID from the button
    //     var url = base_url + '/website-clone/' + id; // Construct the URL

    //     // Perform the AJAX request
    //     $.ajax({
    //         url: url,
    //         method: 'GET', // Change to 'POST' if needed
    //         success: function(response) {
    //             // Handle the successful response
    //             showToast(response.message);
    //             $('#website_data_table').DataTable().ajax.reload();

    //         },
    //         error: function(xhr, status, error) {
    //             // Handle any errors
    //             console.error('AJAX Error:', error);
    //         }
    //     });
    // });
    $('#website_data_table').on('click', '.website-clone', function(e) {
        e.preventDefault();

        var id = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: "Do you want to clone this web",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Clone this!',
            cancelButtonText: 'No, cancel!'
        }).then((result) => {
            if (result.isConfirmed) {
                var url = base_url + '/website-clone/' + id;

                $.ajax({
                    url: url,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire('Success!', 'Website cloned successfully.', 'success');

                        $('#website_data_table').DataTable().ajax.reload();
                    },
                    error: function(xhr) {
                        console.log(xhr);
                        Swal.fire('Error!', 'Error deleting item.', 'error');
                    }
                });
            }
        });
    });
   
    $('#website_data_table').on('click', '.dashboard-detail', function(event) {
        var id = $(this).data('id'); 
        var url = $(this).data('url'); // Use data-url instead of href
        window.location.href = url; 
    });
    $('#website_data_table').on('click', '.clone-web', function(event) {
        var id = $(this).data('id'); 
        var url = $(this).data('url'); // Use data-url instead of href
        window.location.href = url; 
    });
</script>

@endsection