@extends('backend.app')
@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/datatable/css/datatables.min.css') }}">
@endpush
@section('title', 'Company List')
@section('content')
    <div class="app-content content ">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Companies List</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive mt-4 p-4 card-datatable table-responsive pt-0">
                    <table class="table table-hover" id="data-table">
                        <thead>
                            <tr>
                                <th>
                                    <div class="form-checkbox">
                                        <input type="checkbox" class="form-check-input" id="select_all"
                                            onclick="select_all()">
                                        <label class="form-check-label" for="select_all"></label>
                                    </div>
                                </th>
                                <th>Name</th>
                                <th>User</th>
                                <th>Audience</th>
                                <th>Website</th>
                                <th>Length</th>
                                <th>City</th>
                                <th>Categories</th>
                                <th>Since</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Employees Modal -->
    <div class="modal fade" id="employeesModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">
                        <i class="fa-solid fa-users me-2"></i>
                        <span id="modalCompanyName">Company Employees</span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Job Title</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="employeesTableBody">
                                <tr>
                                    <td colspan="5" class="text-center py-4">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @push('script')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="{{ asset('backend/assets/datatable/js/datatables.min.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            $(document).ready(function() {
                var searchable = [];
                var selectable = [];
                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    }
                });
                if (!$.fn.DataTable.isDataTable('#data-table')) {
                    let dTable = $('#data-table').DataTable({
                        order: [],
                        lengthMenu: [
                            [25, 50, 100, 200, 500, -1],
                            [25, 50, 100, 200, 500, "All"]
                        ],
                        processing: true,
                        responsive: true,
                        serverSide: true,
                        language: {
                            processing: `<div class="text-center">
                                        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>`
                        },
                        scroller: {
                            loadingIndicator: false
                        },
                        pagingType: "full_numbers",
                        dom: "<'row justify-content-between align-items-center table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
                        ajax: {
                            url: "{{ route('company.index') }}",
                            type: "get",
                        },
                        columns: [
                        {
                                data: 'bulk_check',
                                name: 'bulk_check',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'name',
                                name: 'name',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'user',
                                name: 'user',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'audience',
                                name: 'audience',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'website',
                                name: 'website',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'length',
                                name: 'length',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'city',
                                name: 'city',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'categories',
                                name: 'categories',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'created_at',
                                name: 'created_at',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'status',
                                name: 'status',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'action',
                                name: 'action',
                                orderable: false,
                                searchable: false
                            },
                        ],
                    });

                    new DataTable('#example', {
                        responsive: true
                    });
                }
            });

            function showDeleteConfirm(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!',
                }).then((result) => {
                    if (result.isConfirmed) {
                        deleteUser(id);
                    }
                });
            }


            function deleteUser(id) {
                let url = '{{ route('user.destroy', ':id') }}'.replace(':id', id);
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        console.log('Response:', response);
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.message,
                                showConfirmButton: false,
                                timer: 1500
                            })
                            $('#data-table').DataTable().ajax.reload();
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: response.message,
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    },
                    error: function(xhr) {
                        console.log('Error:', xhr.responseText);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: 'Error deleting user: ' + (xhr.responseJSON?.message || 'Unknown error'),
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }

            // Status Change Confirm Alert
            function showStatusChangeAlert(id) {
                event.preventDefault();
                Swal.fire({
                    title: 'Are you sure?',
                    text: 'You want to update the status?',
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonColor: '#3085d6',
                }).then((result) => {
                    if (result.isConfirmed) {
                        statusChange(id);
                    }
                });
            }

            // Status Change
            function statusChange(id) {
                let url = '{{ route('user.status', ':id') }}'.replace(':id', id);
                $.ajax({
                    type: "GET",
                    url: url,
                    success: function(resp) {
                        if (resp.success) {
                            Swal.fire({
                                icon: "success",
                                title: resp.message,
                                showConfirmButton: false,
                                timer: 800
                            });
                        } else if (resp.errors) {
                            Swal.fire({
                                icon: "error",
                                title: resp.errors[0],
                                showConfirmButton: false,
                                timer: 800
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: resp.message,
                                showConfirmButton: false,
                                timer: 800
                            });
                        }
                        $('#data-table').DataTable().ajax.reload();
                    },
                    error: function(error) {
                        console.log('Error:', error.responseText);
                    }
                });
            }

            // View Company Employees
            function viewEmployees(companyId, companyName) {
                // Update modal title
                $('#modalCompanyName').text(companyName + ' - Employees');

                // Reset table body to loading state
                $('#employeesTableBody').html(`
                    <tr>
                        <td colspan="5" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </td>
                    </tr>
                `);

                // Show modal
                $('#employeesModal').modal('show');

                // Fetch employees
                let url = '{{ route('company.employees', ':id') }}'.replace(':id', companyId);

                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(response) {
                        if (response.success && response.employees.length > 0) {
                            let html = '';
                            response.employees.forEach(function(employee) {
                                html += `
                                    <tr>
                                        <td><strong>${employee.name}</strong></td>
                                        <td>${employee.email}</td>
                                        <td>${employee.phone}</td>
                                        <td>${employee.job_title}</td>
                                        <td>${employee.status}</td>
                                    </tr>
                                `;
                            });
                            $('#employeesTableBody').html(html);
                        } else {
                            $('#employeesTableBody').html(`
                                <tr>
                                    <td colspan="5" class="text-center py-5">
                                        <i class="fa-solid fa-users-slash fa-3x text-muted mb-3"></i>
                                        <p class="text-muted">No employees found for this company.</p>
                                    </td>
                                </tr>
                            `);
                        }
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr);
                        $('#employeesTableBody').html(`
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <i class="fa-solid fa-circle-exclamation fa-3x text-danger mb-3"></i>
                                    <p class="text-danger">Error loading employees. Please try again.</p>
                                </td>
                            </tr>
                        `);
                    }
                });
            }
        </script>
    @endpush
@endsection