@extends('layouts.app')

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-1">
        <div>
            <h1 class="mb-0 fw-bolder">{{ str('reseller')->plural()->ucfirst() }}</h1>
        </div>
        <div></div>
    </div>
    <div class="card shadow">
        <div class="card-body">
            <table id="table" class="table align-middle w-100" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Brand Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.13.8/dataTables.bootstrap5.min.css" integrity="sha512-TYucTg2DTKx05NRJKSS3IoVrDPfhuNYCw30zPRFOYgE1OD1j2VQQ+iCZj2mG8vNcXStFGdV+1XBLOWSij+P/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />    
@endpush

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.13.8/dataTables.bootstrap5.min.js" integrity="sha512-zw34c1fnMeY29qzodeC+GGKfyQQ7hN+a9yjGnIAZbkPPn/Xeh8Z46uea/fjq5Mwsp4bxvGKfJrTNnh/GdIZJ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(()=>{
    'use strict'
    $('#table').DataTable({
        serverSide: true,
        ajax: {
            url: `{{ route('resellers.index') }}`
        },
        
        columns: [
            { 
                data:'legal_name',
                render(data, type, row, meta){
                    return `<a class="m-0 lh-1 fw-bolder" href="{{ route('resellers.index') }}/${row.id}">
                        <strong>${row.brand_name}</strong><br/>
                        <small>${row.legal_name}</small>
                    </a>`;
                }
            
            },
            { data:'brand_name', visible:false },
            { 
                data:'full_address', 
                name:'address',
                render(data, type, row, meta){
                    return `<p class="m-0 lh-1">
                        <small class="text-muted">${data}</small>
                    </p>`;
                }

            }
        ]
    });
})
</script>
@endpush