@extends('layouts.master')

@section('title')
    @lang('translation.yajra-datatable')
@endsection

@section('css')
    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
@endsection

@section('content')
    <div class='bg-white px-3'>
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="py-3 pt-4">@lang('translation.User_List')</h4>
            {{-- <a href="{{ route('user.create') }}" class="btn btn-outline-info px-4">@lang('translation.Add')</a> --}}
        </div>
        <div class="d-flex justify-content-end pb-3">
            <button class="btn btn-primary " onclick="downloadExcel()"><i class="fa-solid fa-table-cells"></i></button>
            <button class="btn btn-warning mx-2" onclick="downloadPDF()"><i class="fa-solid fa-file-pdf"></i>
            </button>
        </div>

        <div class="table-responsive">
            {{-- <table class="table table-bordered yajra-datatable"> --}}
            <table id='exportTable' class="table table-bordered yajra-datatable">
                <thead>
                    <tr>
                        <th>@lang('translation.No')</th>
                        <th>@lang('translation.First_Name')</th>
                        <th>@lang('translation.Email')</th>
                        <th>@lang('translation.Company')</th>
                        <th>@lang('translation.Country')</th>
                        <th>@lang('translation.Mobile')</th>
                        <th>@lang('translation.Industry')</th>
                        <th>@lang('translation.Plan')</th>
                        <th>@lang('translation.Action')</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $key => $d)
                        <tr>
                            <td>{{ (int) $key + 1 }}</td>
                            <td>{{ $d->fname }}</td>
                            <td>{{ $d->email }}</td>
                            <td>{{ $d->company }}</td>
                            <td>{{ $d->country }}</td>
                            <td>{{ $d->mobile }}</td>
                            <td>{{ $d->industry }}</td>
                            <td>{{ $d->billing }}</td>
                            <td class='d-flex'>
                                {{-- <a href="{{ route('user.edit', $d->id) }}" class="btn btn-primary px-3 mx-2">@lang('translation.Edit')</a> --}}
                                <a href="{{ url($d->id,'store-dashboard') }}" class="btn btn-warning px-3 mx-2">
                                    <i class="bx fs-5 bxs-pie-chart-alt-2 p-0 m-0"></i>
                                </a>
                                <a href="{{ route('invoice',$d->last_billing_id) }}" class="btn btn-info px-3 mx-2">
                                    <i class="fas fa-file-invoice p-0 px-1 m-0"></i>
                                </a>
                                <form action="transcation" method="POST">
                                    @csrf
                                    <input type="hidden" name="uid" value="{{ $d->id }}">
                                    <button class="btn btn-secondary px-3 mx-2">
                                        <i class="fas fa-list p-0 px-1 m-0"></i>
                                    </button>
                                </form>
                                {{-- <form action="{{ route('user.destroy', $user->id) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">Delete</button>
                            </form> --}}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $('.yajra-datatable').DataTable({
            // Set page length options including "All"
            "lengthMenu": [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"]
            ],
            // Optionally set default page length if needed
            // "pageLength": -1, // Uncomment if you want to show all rows by default
        });
    </script>
@endsection