@extends('admin.layouts.app')

@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">@lang('admin.businesses')</a></li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">@lang('admin.businesses')</h4>
                        <a class="btn btn-success" href="{{ route('admin.businesses.create') }}">@lang('admin.create')</a>
                    </div>
                    <div class="card-body">
                         <!-- Add a form for filtering -->
                         <form  method="get" action="" class="d-flex">
                            @csrf
                            <div class="input-group me-2">
                                <input class="form-control" type="text" name="keyword" placeholder="@lang('admin.filter_by_name')">
                            </div>                     
                            <button type="submit" class="btn btn-primary">@lang('admin.filter')</button>
                        </form>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>@lang('admin.name')</th>
                                        <th>@lang('admin.logo')</th>
                                        <th>@lang('admin.owner')</th>
                                        <th>@lang('admin.plan')</th> 
                                        <th>@lang('admin.credit')</th> 
                                        <th>@lang('admin.status')</th>
                                        <th>@lang('admin.created_at')</th>
                                        <th>@lang('admin.actions')</th>
                                    </tr>
                                </thead>
                                <tbody id="businessTableBody">
                                    @foreach ($businesses as $business)
                                        <tr>
                                            <td>{{ $business->name }}</td>
                                            <td>
                                                @if ($business->logo)
                                                    <img src="{{ asset('storage/' . $business->logo) }}" alt="logo"
                                                        style="width: 50px; height: 50px;">
                                                @else
                                                    @lang('admin.no_logo')
                                                @endif
                                            </td>
                                            @if($business->owner)
                                                <td>{{ $business->owner->name }}</td>
                                            @else
                                                <td></td>
                                            @endif
                                            <td>@if(isset($business->plan_id)){{ $business->plan->name }}@endif</td>
                                            <td>{{ $business->credit }}</td>
                                            <td>
                                                <span class="badge  text-bg-{{ $business->status == 1 ? 'success' : 'warning' }}">
                                                    @if ($business->status == 1)
                                                        @lang('user.active')
                                                    @else
                                                        @lang('user.Inactive')
                                                    @endif
                                                </span>
                                            </td>
                                            <td>{{ $business->created_at }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    <a href="{{ route('admin.businesses.edit', ['business' => $business->id]) }}"
                                                        class="btn btn-primary shadow btn-xs sharp me-1">
                                                        <i class="fa fa-pencil"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-danger shadow btn-xs sharp"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#deleteModal_{{ $business->id }}"><i
                                                            class="fa fa-trash"></i></button>
                                                </div>
                                            </td>
                                        </tr>

                                        <!-- Modal -->
                                        <div class="modal fade" id="deleteModal_{{ $business->id }}">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">@lang('admin.delete')</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">@lang('admin.delete_message')</div>
                                                    <div class="modal-footer">
                                                        <form
                                                            action="{{ route('admin.businesses.destroy', $business->id) }}"
                                                            method="post" class="" id="delete_modal">
                                                            @method('delete')
                                                            @csrf

                                                            <button type="submit"
                                                                class="btn btn-success waves-effect">@lang('admin.confirm')</button>
                                                            <button type="button" class="btn btn-danger waves-effect"
                                                                data-dismiss="modal">@lang('admin.cancel')</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $businesses->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
{{-- <script>
    $(document).ready(function() {
        // Assuming you're using jQuery for simplicity
        // $('#filterForm').on('submit', function(e) {
        //     e.preventDefault();
        //     var formData = $(this).serialize();
        //     $.ajax({
        //         type: 'GET',
        //         url: "{{ route('admin.businesses.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             console.log(response.businesses);
        //             // Update the table with the filtered data
        //             $('#businessTableBody').html(''); // Clear the existing rows
        //             $.each(response.businesses, function(index, business) {
        //                 var created_at = new Date(business.created_at);
        //                 created_at = created_at.toLocaleString();
        //                 var statusBadge = business.status == 1 ? '<span class="badge text-bg-success">@lang("user.active")</span>' : '<span class="badge text-bg-warning">@lang("user.Inactive")</span>';
        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${business.name}</td>
        //                     <td>
        //                         ${business.logo ? '<img src="'+ business.logo + '" alt="logo" style="width: 50px; height: 50px;">' : '@lang("admin.no_logo")'}
        //                     </td>
        //                     <td>${statusBadge}</td>
        //                     <td>${created_at}</td>
        //                     <td>
        //                         <div class="d-flex">
        //                             <a href="{{ route('admin.businesses.edit', ['business' => ' + business.id + ']) }}" class="btn btn-primary shadow btn-xs sharp me-1">
        //                                 <i class="fa fa-pencil"></i>
        //                             </a>
        //                             <button type="button" class="btn btn-danger shadow btn-xs sharp" data-bs-toggle="modal" data-bs-target="#deleteModal_${business.id}">
        //                                 <i class="fa fa-trash"></i>
        //                             </button>
        //                         </div>
        //                     </td>
        //                 </tr>
        //                 <!-- Modal -->
        //                 <div class="modal fade" id="deleteModal_${business.id}">
        //                     <div class="modal-dialog" role="document">
        //                         <div class="modal-content">
        //                             <div class="modal-header">
        //                                 <h5 class="modal-title">@lang('admin.delete')</h5>
        //                                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        //                             </div>
        //                             <div class="modal-body">@lang('admin.delete_message')</div>
        //                             <div class="modal-footer">
        //                                 <form action="{{ route('admin.destroy', $business->id) }}" method="post" class="" id="delete_modal_${business.id}">
        //                                     @method('delete')
        //                                     @csrf
        //                                     <button type="submit" class="btn btn-success waves-effect">@lang('admin.confirm')</button>
        //                                     <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">@lang('admin.cancel')</button>
        //                                 </form>
        //                             </div>
        //                         </div>
        //                     </div>
        //                 </div>`;
        //                 $('#businessTableBody').append(rowHtml);
        //             });
        //             // Update pagination links
        //             $('.pagination').html(generatePaginationLinks(response));
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error);
        //         }
        //     });
        // });


        //   // Function to generate pagination links
        //   function generatePaginationLinks(paginator) {
        //     var paginationHtml = '<nav aria-label="Page navigation example">';
        //     paginationHtml += '<ul class="pagination justify-content-center">';

        //     if (paginator.current_page === 1) {
        //         paginationHtml += '<li class="page-item disabled">';
        //     } else {
        //         paginationHtml += '<li class="page-item">';
        //     }
        //     paginationHtml += '<a class="page-link" href="#" tabindex="-1">Previous</a></li>';

        //     for (var i = 1; i <= paginator.last_page; i++) {
        //         if (i === paginator.current_page) {
        //             paginationHtml += '<li class="page-item active">';
        //         } else {
        //             paginationHtml += '<li class="page-item">';
        //         }
        //         paginationHtml += '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
        //     }

        //     if (paginator.current_page === paginator.last_page) {
        //         paginationHtml += '<li class="page-item disabled">';
        //     } else {
        //         paginationHtml += '<li class="page-item">';
        //     }
        //     paginationHtml += '<a class="page-link" href="#" rel="next">Next</a></li>';

        //     paginationHtml += '</ul></nav>';

        //     return paginationHtml;
        // }
        
        // // Handle pagination links click
        // $(document).on('click', '.pagination a', function(e) {
        //     e.preventDefault();
        //     var page = $(this).data('page'); // Get the page number from the data attribute
        //     var formData = $('#filterForm').serialize() + '&page=' + page; // Add page parameter to form data
        //     $.ajax({
        //         type: 'GET',
        //         url: "{{ route('admin.businesses.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             // Clear existing rows and modals
        //             $('#businessTableBody').empty();
        //             $('.modal').remove(); // Clear all modals

        //             $.each(response.businesses, function(index, business) {
        //                 var created_at = new Date(business.created_at);
        //                 created_at = created_at.toLocaleString();
        //                 var statusBadge = business.status == 1 ? '<span class="badge text-bg-success">@lang("user.active")</span>' : '<span class="badge text-bg-warning">@lang("user.Inactive")</span>';
        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${business.name}</td>
        //                     <td>
        //                         ${business.logo ? '<img src="' + business.logo + '" alt="logo" style="width: 50px; height: 50px;">' : '@lang("admin.no_logo")'}
        //                     </td>
        //                     <td>${statusBadge}</td>
        //                     <td>${created_at}</td>
        //                     <td>
        //                         <div class="d-flex">
        //                             <a href="{{ route('admin.businesses.edit', ['business' => ' + business.id + ']) }}" class="btn btn-primary shadow btn-xs sharp me-1">
        //                                 <i class="fa fa-pencil"></i>
        //                             </a>
        //                             <button type="button" class="btn btn-danger shadow btn-xs sharp" data-bs-toggle="modal" data-bs-target="#deleteModal_${business.id}">
        //                                 <i class="fa fa-trash"></i>
        //                             </button>
        //                         </div>
        //                     </td>
        //                 </tr>
        //                 <!-- Modal -->
        //                 <div class="modal fade" id="deleteModal_${business.id}">
        //                     <div class="modal-dialog" role="document">
        //                         <div class="modal-content">
        //                             <div class="modal-header">
        //                                 <h5 class="modal-title">@lang('admin.delete')</h5>
        //                                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        //                             </div>
        //                             <div class="modal-body">@lang('admin.delete_message')</div>
        //                             <div class="modal-footer">
        //                                 <form action="{{ route('admin.destroy', $business->id) }}" method="post" class="" id="delete_modal_${business.id}">
        //                                     @method('delete')
        //                                     @csrf
        //                                     <button type="submit" class="btn btn-success waves-effect">@lang('admin.confirm')</button>
        //                                     <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">@lang('admin.cancel')</button>
        //                                 </form>
        //                             </div>
        //                         </div>
        //                     </div>
        //                 </div>`;
        //                 $('#businessTableBody').append(rowHtml);

        //             });

        //             // Update pagination links
        //             $('.pagination').html(generatePaginationLinks(response));
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error);
        //         }
        //     });
        // });

    });
	
</script> --}}