@extends('layouts.app')
@section('title', 'Customers')
@php $breadcrumbs = [['label' => 'Masters', 'url' => '#'], ['label' => 'Customers']]; @endphp

@section('content')
<div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
    <div>
        <h4 class="fw-bold mb-1">Customer Master</h4>
        <p class="text-muted mb-0" style="font-size:0.85rem;">Manage your customer database</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse">
            <i class="bi bi-funnel me-1"></i>Filters
        </button>
        @can('customers.create')
            <a href="{{ route('masters.customers.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg me-1"></i>New Customer
            </a>
        @endcan
    </div>
</div>

<div class="collapse mb-3" id="filterCollapse">
    <div class="card border shadow-sm">
        <div class="card-body py-3">
            <form id="customerFilterForm">
                <div class="row g-2 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label" style="font-size:0.78rem;">Group</label>
                        <select class="form-select form-select-sm" id="filterGroup">
                            <option value="">All Groups</option>
                            <option value="domestic">Domestic</option>
                            <option value="international">International</option>
                            <option value="government">Government</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" style="font-size:0.78rem;">City</label>
                        <input type="text" class="form-control form-control-sm" id="filterCity" placeholder="City">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" style="font-size:0.78rem;">Status</label>
                        <select class="form-select form-select-sm" id="filterStatus">
                            <option value="">All Status</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" style="font-size:0.78rem;">Type</label>
                        <select class="form-select form-select-sm" id="filterType">
                            <option value="">All Types</option>
                            <option value="buyer">Buyer</option>
                            <option value="consignee">Consignee</option>
                            <option value="notify">Notify Party</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search me-1"></i>Apply</button>
                    </div>
                    <div class="col-md-2">
                        <button type="reset" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-arrow-counterclockwise me-1"></i>Reset</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<x-data-table id="customersTable" title="Customer List"
    :columns="[
        ['key' => 'code', 'label' => 'Code', 'width' => '100px'],
        ['key' => 'name', 'label' => 'Customer Name'],
        ['key' => 'group', 'label' => 'Group'],
        ['key' => 'city', 'label' => 'City'],
        ['key' => 'country', 'label' => 'Country'],
        ['key' => 'contact_person', 'label' => 'Contact'],
        ['key' => 'phone', 'label' => 'Phone'],
        ['key' => 'status', 'label' => 'Status'],
    ]"
    source="{{ route('masters.customers.index') }}"
/>

@can('customers.create')
<div class="modal fade" id="bulkImportModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-upload me-2"></i>Import Customers</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('masters.customers.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Upload Excel/CSV File</label>
                        <input type="file" class="form-control" name="file" accept=".xlsx,.xls,.csv" required>
                    </div>
                    <div class="text-end">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-upload me-1"></i>Import</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endcan
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const table = jQuery('#customersTable').DataTable();
    table.on('draw', function() {
        table.rows().every(function() {
            const row = this.node();
            const data = this.data();
            if (data && data.actions) {
                jQuery(row).find('.delete-form').on('submit', function(e) {
                    e.preventDefault();
                    const form = this;
                    Swal.fire({
                        title: 'Delete Customer?',
                        text: 'This action cannot be undone.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        confirmButtonText: 'Yes, Delete'
                    }).then(function(result) {
                        if (result.isConfirmed) { form.submit(); }
                    });
                });
            }
        });
    });
});
</script>
@endpush