@extends('layouts.app')

@section('content')

<div class="container-fluid">


<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Customer List</h2>

    <a href="{{ route('customers.create') }}"
       class="btn btn-success">
        + Add Customer
    </a>
</div>

<div class="card shadow-sm">

    <div class="card-body">

        <table class="table table-dark table-hover table-bordered">

            <thead>

                <tr>
                    <th>Customer ID</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Package</th>
                    <th>Monthly Bill</th>
                    <th>Action</th>
                </tr>

            </thead>

            <tbody>

            @foreach($customers as $customer)

                <tr>

                    <td>{{ $customer->customer_id }}</td>

                    <td>{{ $customer->name }}</td>

                    <td>{{ $customer->mobile }}</td>

                    <td>{{ $customer->package_name }}</td>

                    <td>৳ {{ $customer->monthly_bill }}</td>

                    <td>

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

                        <form
                            action="{{ route('customers.destroy',$customer->id) }}"
                            method="POST"
                            style="display:inline-block;">

                            @csrf
                            @method('DELETE')

                            <button type="submit"
                                    class="btn btn-danger btn-sm"
                                    onclick="return confirm('Delete this customer?')">
                                Delete
                            </button>

                        </form>

                    </td>

                </tr>

            @endforeach

            </tbody>

        </table>

    </div>

</div>


</div>

@endsection