@extends('admin.layouts.app')

@section('title', 'Gestion des Clients')

@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Liste des Clients</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customerModal">
                    <i class="fas fa-plus"></i> Nouveau Client
                </button>
                <div class="btn-group ml-2">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                        <i class="fas fa-download"></i> Exporter
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="{{ route('admin.customers.export') }}?type=xlsx" class="dropdown-item">
                            <i class="fas fa-file-excel mr-2"></i> Excel
                        </a>
                        <a href="{{ route('admin.customers.export') }}?type=pdf" class="dropdown-item">
                            <i class="fas fa-file-pdf mr-2"></i> PDF
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table id="customersTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Nom</th>
                        <th>Email</th>
                        <th>Téléphone</th>
                        <th>Limite Crédit</th>
                        <th>Solde</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('admin.customers.modals.create')
    @include('admin.customers.modals.edit')
    @include('admin.customers.modals.balance')
@endsection

@push('scripts')
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    <script>
        // Configure Toastr
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        // Initialize DataTable
        let table = $('#customersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.customers.getData') }}",
            columns: [{
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'credit_limit',
                    name: 'credit_limit'
                },
                {
                    data: 'balance_status',
                    name: 'balance'
                },
                {
                    data: 'status',
                    name: 'is_active'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                }
            ],
            order: [
                [0, 'asc']
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            }
        });
    </script>
@endpush