@extends('app-new')
@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
                <h2 class="content-header-title float-start mb-0">Customers</h2>
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">{{trans('master/master.home')}}</a>
                        </li>
                        <li class="breadcrumb-item active">Customers
                        </li>
                    </ol>
                </div>
                <a href="{{ route('customers.create') }}" class="btn btn-primary">
                    <i data-feather="plus" class="me-50"></i> Add Customer
                </a>    
        </div>
    </div>
@endpush

@push('head-script')
<link rel="stylesheet" href="/app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" href="/app-assets/css/components.css">

<link rel="stylesheet" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">

<link rel="stylesheet" href="/assets/css/daterangepicker.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css">
@endpush

@section('content')

<div class="row">
    <div class="col-12">


        <div class="card">
            <div class="card-body">
                <table id="customers-table" class="table table-bordered nowrap w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Display Name</th>
                            <th>Company</th>
                            <th>First</th>
                            <th>Last</th>
                            <th>Phone</th>
                            <th>Whatsapp</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($customers as $i => $c)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $c->display_name }}</td>
                            <td>{{ $c->company_name }}</td>
                            <td>{{ $c->first_name }}</td>
                            <td>{{ $c->last_name }}</td>
                            <td>{{ $c->phone_number }}</td>
                            <td>{{ $c->whatsapp_number }}</td>
                            <td>{{ $c->email }}</td>

                            <td>
                                <span class="badge {{ $c->status == 1 ? 'bg-success' : 'bg-danger' }}">
                                    {{ $c->status == 1 ? 'Active' : 'Inactive' }}
                                </span>
                            </td>

                            <td>{{ $c->created_at->format('Y-m-d') }}</td>

                            <td>
                                <a href="{{ route('customers.edit', $c->id) }}"
                                class="btn btn-sm btn-primary">
                                    Edit
                                </a>

                                <form action="{{ route('customers.destroy', $c->id) }}"
                                    method="POST"
                                    class="d-inline"
                                    onsubmit="return confirm('Are you sure you want to delete this customer?')">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit" class="btn btn-sm btn-danger">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

@endsection

{{-- ================= FOOTER SCRIPTS ================= --}}
@push('footer-script')

{{-- ✅ REQUIRED: jQuery FIRST --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

{{-- DataTables --}}
<script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.min.js"></script>
<script>
$(function () {

    // ✅ Initialize DataTable ONCE
    let table = $('#customers-table').DataTable({
        responsive: true,
        paging: true,
        searching: true,
        lengthChange: true,
        pageLength: 10,
        order: [[0, 'asc']],
        columnDefs: [
            { targets: 9, visible: false }, // created_at hidden
            { targets: 10, orderable: false, searchable: false } // action column
        ]
    });
});
</script>

@endpush