@extends('master.app')
@section('title', 'customer')
@section('body')
    <main class="app-content">
        <section class=" gradient-custom-2">
            <div class=" py-5 h-100">
                <div class="row d-flex justify-content-center align-items-center h-100">
                    <div class="col-md-12 col-xl-12">

                        <div class="card mask-custom">
                            <div class="card-body p-4 ">

                                <div class="row">
                                    <div class="col-md-4"></div>
                                    <div class="col-md-4">
                                        <div class="text-center">
                                            <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-todo-list/check1.webp"
                                                alt="Check" width="60">
                                            <h2 class="my-4">"Admad" Bill List</h2>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center">
                                            <a href="{{ route('customers.create') }}"
                                                class="btn btn-primary btn-rounded mt-5" style="float: right">Add <i
                                                    class="fa fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>

                                <table class="table  mb-0 data_table">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Name</th>
                                            <th scope="col">Phone</th>
                                            <th scope="col">Address</th>
                                            <th scope="col">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($bills as $row)
                                            <tr class="fw-normal">
                                                <th class="border-0">{{ $loop->iteration }}</th>
                                                <th class="border-0">
                                                    <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                                        alt="avatar 1" style="width: 45px; height: auto;">
                                                    <span class="ms-2">{{ $row->name }}</span>
                                                </th>
                                                <td class="border-0 align-middle">{{ $row->phone }}</td>
                                                <td class="border-0 align-middle">
                                                    <h6 class="mb-0"><span
                                                            class="badge bg-success">{{ $row->address }}</span></h6>
                                                </td>
                                                <td class="border-0 align-middle">
                                                    <a href="{{ route('customers.show', $row->id) }}"
                                                        data-mdb-toggle="tooltip"
                                                        title="show More Detials Related this customer"><i
                                                            class="fas fa-eye fa-lg text-success me-3"></i></a>
                                                    <a href="{{ route('customers.edit', $row->id) }}"
                                                        data-mdb-toggle="tooltip" title="Edit"><i
                                                            class="fas fa-edit fa-lg text-success me-3"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    {{ $bills->links('pagination::bootstrap-4') }}
                                </table>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection


@section('pageJs')
    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_account").addClass("active");
        $("#nav_accounti").addClass("is-expanded");
        $("#nav_user").addClass("active");
    </script>
@endsection