@extends('customers.layout')
@section('customers.content')
<div class="container">
    <div class="card">
        <div class="card-header d-flex flex-column flex-md-row align-items-md-center justify-content-between">
            <ol class="breadcrumb m-0 p-0 flex-grow-1 mb-2 mb-md-0">
                <li class="breadcrumb-item"><a href="{{ implode('/', ['','customers']) }}"> Customers</a></li>
            </ol>
            <div class="form-check me-3">
                <input class="form-check-input" type="checkbox" id="showTrashed">
                <label class="form-check-label" for="showTrashed">
                    Show Trashed
                </label>
            </div>
            <a href="{{ url('download_customers') }}" class="btn btn-primary">Download</a>
            <a href="{{ route('customers.create', []) }}" class="btn btn-primary ms-2">
                <i class="fa fa-plus"></i> @lang('Create new Customer')
            </a>
        </div>
        <div class="card-body">
            <table id="customersTable" class="table table-striped" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Contact</th>
                        <th>Alt Contact</th>
                        <th>Balance</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
@section('customjs')
<script>
$(document).ready(function() {
    // Destroy existing DataTable if it exists
    if ($.fn.DataTable.isDataTable('#customersTable')) {
        $('#customersTable').DataTable().clear().destroy();
    }
    
    // Remove any existing event handlers
    $('#customersTable').off();
    $('#showTrashed').off();
    
    var table = $('#customersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('customers.index') }}",
            data: function(d) {
                d.trashed = $('#showTrashed').is(':checked') ? 1 : 0;
            }
        },
        columns: [
            { data: 'name', name: 'name' },
            { data: 'contact', name: 'contact' },
            { data: 'alt_contact', name: 'alt_contact' },
            { data: 'balance', name: 'balance' },
            { 
                data: 'actions', 
                name: 'actions', 
                orderable: false, 
                searchable: false 
            }
        ],
        order: [[0, 'asc']],
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        language: {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
            search: "_INPUT_",
            searchPlaceholder: "Search customers..."
        },
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
             '<"row"<"col-sm-12"tr>>' +
             '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>'
    });

    // Reload table when trashed checkbox changes
    $('#showTrashed').on('change', function() {
        table.ajax.reload();
    });

    // Handle form submissions within table (delete, restore, purge)
    $('#customersTable').on('submit', 'form', function(e) {
        if (!confirm('Are you sure you want to perform this action?')) {
            e.preventDefault();
            return false;
        }
    });
});
</script>
@endsection