@extends('admin.layout.master')
@section('title', 'Client Management')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <nav class="page-breadcrumb">
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
    </nav>

    <div class="row">
        <div class="col-md-12">
            <a class="btn btn-primary" href="{{ route('admin.add.new.client') }}" style="float: right; margin: 5px">Add Client</a>
        </div>
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Client Management</h6>
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table">
                            <thead>
                                <tr>
                                    <th>Client Name</th>
                                    <th>GSTIN</th>
                                    <th>Authorized Person</th>
                                    <th>Contact Number</th>
                                    <th>Payment</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- DataTables will populate this area -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
    <script>
        $(document).ready(function() {
            $('#dataTableExample').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("admin.user.management") }}',
                columns: [
                    { data: 'name', name: 'name' },
                    { data: 'gstin', name: 'gstin' },
                    { data: 'authorized_person', name: 'authorized_person' },
                    { data: 'phone_no', name: 'phone_no' },
                    { data: 'payment', name: 'payment' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        });
    </script>
@endpush