@extends('buyer.layout')

@section('title')
<title>Buyer Details</title>
@endsection

@section('frontend-content')
<div class="container mx-auto my-5">
    <section>

        <div class="col-md-12 align-top">
            <div class="card border shadow">

                <div class="card-header bg-light d-flex justify-content-between align-items-center px-3 py-2">
                    <h5 class="card-title mb-0">All Buyers</h5>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addbuyerpopup">
                        Add New Buyer
                    </button>
                </div>


                <div class="col-md-12 card-body">
                    <div class="table-responsive mx-auto">
                        <table id="allbuyerdetails-list" class="w-100 table-bordered table-striped">
                            <thead class="text-center bg-dark text-white">
                                <tr>
                                    <th>S.No.</th>
                                    <th>User Name</th>
                                    <th>Email</th>
                                    <th>Mobile No</th>
                                    <th>Option</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                <tr>
                                    <td class="text-center">1</td>
                                    <td>Grace Harper</td>
                                    <td>grace.harper@example.com</td>
                                    <td>9876543210</td>
                                    <td class="text-center">
                                        <div class="dropdown">
                                            <button class="btn btn-sm" type="button"
                                                id="dropdownMenuButton{{ $index ?? 1 }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                <i class="bi bi-grid text-dark"></i>
                                            </button>
                                            <div class="dropdown-menu flex-column bg-light dropdown-menu-right shadow-sm rounded border"
                                                aria-labelledby="dropdownMenuButton{{ $index ?? 1 }}">
                                                <a class="dropdown-item d-flex align-items-center gap-2 login-supplier"
                                                    href="javascript:void(0);" data-email="grace@example.com">
                                                    <i class="bi bi-box-arrow-in-right text-primary"></i> Login
                                                </a>
                                                <a class="dropdown-item d-flex align-items-center gap-2 edit-supplier"
                                                    href="javascript:void(0);" data-id="1">
                                                    <i class="bi bi-pencil-square text-success"></i> Edit Buyer
                                                </a>
                                            </div>
                                        </div>
                                    </td>

                                </tr>
                                <tr>
                                    <td class="text-center">2</td>
                                    <td>Aiden Frost</td>
                                    <td>aiden.frost@example.com</td>
                                    <td>9123456780</td>
                                    <td class="text-center">
                                        <div class="dropdown">
                                            <button class="btn btn-sm" type="button"
                                                id="dropdownMenuButton{{ $index ?? 1 }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                <i class="bi bi-grid text-dark"></i>
                                            </button>
                                            <div class="dropdown-menu flex-column bg-light dropdown-menu-right shadow-sm rounded border"
                                                aria-labelledby="dropdownMenuButton{{ $index ?? 1 }}">
                                                <a class="dropdown-item d-flex align-items-center gap-2 login-supplier"
                                                    href="javascript:void(0);" data-email="grace@example.com">
                                                    <i class="bi bi-box-arrow-in-right text-primary"></i> Login
                                                </a>
                                                <a class="dropdown-item d-flex align-items-center gap-2 edit-supplier"
                                                    href="javascript:void(0);" data-id="1">
                                                    <i class="bi bi-pencil-square text-success"></i> Edit Buyer
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-center">3</td>
                                    <td>Luna Steele</td>
                                    <td>luna.steele@example.com</td>
                                    <td>9012345678</td>
                                    <td class="text-center">
                                        <div class="dropdown">
                                            <button class="btn btn-sm" type="button"
                                                id="dropdownMenuButton{{ $index ?? 1 }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                <i class="bi bi-grid text-dark"></i>
                                            </button>
                                            <div class="dropdown-menu flex-column bg-light dropdown-menu-right shadow-sm rounded border"
                                                aria-labelledby="dropdownMenuButton{{ $index ?? 1 }}">
                                                <a class="dropdown-item d-flex align-items-center gap-2 login-supplier"
                                                    href="javascript:void(0);" data-email="grace@example.com">
                                                    <i class="bi bi-box-arrow-in-right text-primary"></i> Login
                                                </a>
                                                <a class="dropdown-item d-flex align-items-center gap-2 edit-supplier"
                                                    href="javascript:void(0);" data-id="1">
                                                    <i class="bi bi-pencil-square text-success"></i> Edit Buyer
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-center">4</td>
                                    <td>Kai Bennett</td>
                                    <td>kai.bennett@example.com</td>
                                    <td>9988776655</td>
                                    <td class="text-center">
                                        <div class="dropdown">
                                            <button class="btn btn-sm" type="button"
                                                id="dropdownMenuButton{{ $index ?? 1 }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                <i class="bi bi-grid text-dark"></i>
                                            </button>
                                            <div class="dropdown-menu flex-column bg-light dropdown-menu-right shadow-sm rounded border"
                                                aria-labelledby="dropdownMenuButton{{ $index ?? 1 }}">
                                                <a class="dropdown-item d-flex align-items-center gap-2 login-supplier"
                                                    href="javascript:void(0);" data-email="grace@example.com">
                                                    <i class="bi bi-box-arrow-in-right text-primary"></i> Login
                                                </a>
                                                <a class="dropdown-item d-flex align-items-center gap-2 edit-supplier"
                                                    href="javascript:void(0);" data-id="1">
                                                    <i class="bi bi-pencil-square text-success"></i> Edit Buyer
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-center">5</td>
                                    <td>Nova Quinn</td>
                                    <td>nova.quinn@example.com</td>
                                    <td>9090909090</td>
                                    <td class="text-center">
                                        <div class="dropdown">
                                            <button class="btn btn-sm" type="button"
                                                id="dropdownMenuButton{{ $index ?? 1 }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                <i class="bi bi-grid text-dark"></i>
                                            </button>
                                            <div class="dropdown-menu flex-column bg-light dropdown-menu-right shadow-sm rounded border"
                                                aria-labelledby="dropdownMenuButton{{ $index ?? 1 }}">
                                                <a class="dropdown-item d-flex align-items-center gap-2 login-supplier"
                                                    href="javascript:void(0);" data-email="grace@example.com">
                                                    <i class="bi bi-box-arrow-in-right text-primary"></i> Login
                                                </a>
                                                <a class="dropdown-item d-flex align-items-center gap-2 edit-supplier"
                                                    href="javascript:void(0);" data-id="1">
                                                    <i class="bi bi-pencil-square text-success"></i> Edit Buyer
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </section>
</div>
<div class="modal fade" id="addbuyerpopup" tabindex="-1" aria-labelledby="addbuyerpopupLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addbuyerpopupLabel">Add New Buyer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="newBuyerForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="buyer_name">Buyer Name</label>
                                <input type="text" class="form-control" id="buyer_name" name="buyer_name" required>
                            </div>
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" class="form-control" id="username" name="username" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="category">Category</label>
                                <input type="text" class="form-control" id="category" name="category" required>
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone No</label>
                                <input type="text" class="form-control" id="phone" name="phone" required>
                            </div>
                            <div class="form-group">
                                <label for="address">Address</label>
                                <textarea class="form-control" id="address" name="address" rows="3" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mt-3">

                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection


@section('custom-script')

@endsection