@extends('layouts.app')
@section('title', 'Suppliers')

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

@section('content')

<div class="accordion mb-3" id="customerFilterAccordion">
	<div class="accordion-item">
		<h2 class="accordion-header" id="customerFilterHeading">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#customerFilterCollapse" aria-expanded="false" aria-controls="customerFilterCollapse">
				Filters
			</button>
		</h2>
		<div id="customerFilterCollapse" class="accordion-collapse collapse" aria-labelledby="customerFilterHeading" data-bs-parent="#customerFilterAccordion">
			<div class="accordion-body">
                   <!-- Filters -->
        <div class="row mb-3">
            <div class="col-md-3">
                <select id="filterStatus" class="form-select">
                    <option value="">All Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>
            <div class="col-md-6">
                <input type="text" id="filterSearch" class="form-control" placeholder="Search suppliers...">
            </div>

        </div>
                <div class="mt-3 d-flex gap-2">
                    {{-- <button id="btnApplyFilters" class="btn btn-outline-primary">Apply</button>
                    <button id="btnResetFilters" class="btn btn-outline-secondary">Reset</button> --}}
                    <button type="button" class="btn btn-primary" id="btnApplyFilters">
                        <i class="fas fa-search me-2"></i>
                        Apply
                    </button>
                    <button type="button" class="btn btn-outline-secondary" id="btnResetFilters">
                        <i class="fas fa-times me-2"></i>
                        Clear
                    </button>

                </div>
			</div>
		</div>
	</div>
</div>
<div class="card">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="card-title mb-0">Suppliers</h6>
            <a href="{{ route('suppliers.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>
                Add Supplier
            </a>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">{{ $errors->first() }}</div>
        @endif



        <div class="table-responsive">
            <table id="suppliers-table" class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        {{-- <th>Code</th> --}}
                        <th>Supplier Code</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Contact Person</th>
                        <th>Opening Balance</th>
                        <th>Current Balance</th>
                        <th>Credit Limit</th>
                        <th>Payment Terms</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTables will populate this -->
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('theme/vendors/datatables.net/dataTables.js') }}"></script>
<script src="{{ asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.js') }}"></script>
<script>
$(document).ready(function() {
    // Check if DataTable is available
    if (typeof $.fn.DataTable === 'undefined') {
        console.error('DataTable is not loaded');
        alert('DataTable library is not loaded. Please refresh the page.');
        return;
    }

    // Initialize DataTable
    var table = $('#suppliers-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('suppliers.index') }}",
            data: function(d) {
                d.status = $('#filterStatus').val();
                $('#filterSearch').on('keyup', function () {
                    table.search(this.value).draw();
                });
            },
            error: function(xhr, error, thrown) {
                console.error('DataTable AJAX Error:', error, thrown);
                console.error('Response:', xhr.responseText);
                alert('Error loading data: ' + error);
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'supplier_code', name: 'supplier_code' },
            // { data: 'code', name: 'code' },
            { data: 'email', name: 'email' },
            { data: 'phone', name: 'phone' },
            { data: 'contact_person', name: 'contact_person' },
            { data: 'opening_balance_formatted', name: 'opening_balance' },
            { data: 'balance_formatted', name: 'balance' },
            { data: 'credit_limit_formatted', name: 'credit_limit' },
            { data: 'pay_terms', name: 'pay_terms' },
            { data: 'status_badge', name: 'is_active' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'desc']],
        pageLength: 25,
        responsive: true
    });

    // Apply filters
    $('#btnApplyFilters').click(function() {
        table.draw();
    });

    // Reset filters
    $('#btnResetFilters').click(function() {
        $('#filterStatus').val('');
        $('#filterSearch').val('');
        table.draw();
    });

    // Search on enter key
    $('#filterSearch').keypress(function(e) {
        if (e.which == 13) {
            table.draw();
        }
    });
});
</script>
@endpush
