@extends('layout.master')
@section('content')
    <div class="container-fluid">
        <!-- Start::page-header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Agents</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Agents</li>
                </ol>
            </div>
            {{-- <div class="d-flex">
                <div class="justify-content-center">
                    <button type="button"
                        class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center">
                        <i class="fe fe-download me-2 fs-14"></i> Import
                    </button>
                    <button type="button"
                        class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center">
                        <i class="fe fe-filter me-2 fs-14"></i> Filter
                    </button>
                    <button type="button" class="btn btn-primary my-2 btn-icon-text d-inline-flex align-items-center">
                        <i class="fe fe-download-cloud me-2 fs-14"></i> Download Report
                    </button>
                </div>
            </div> --}}
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="card-title">
                            Agents
                        </div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addAgentModal">
                            <i class="bi bi-plus"></i> Add Agent
                            </i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable-basic" class="table table-bordered text-nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Role</th>
                                        <th>Phone Number</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Tiger</td>
                                        <td>Nixon</td>
                                        <td>Tiger@gmail.com</td>
                                        <td>Agent</td>
                                        <td>+1 (212) 456-7890</td>
                                        <td>
                                            <button class="btn btn-warning btn-sm"><i class="bi bi-pencil"></i></button>
                                            <button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Garrett</td>
                                        <td>Winters</td>
                                        <td>Garrett@gmail.com</td>
                                        <td>User</td>
                                        <td>+1 (212) 456-7890</td>
                                        <td>
                                            <button class="btn btn-warning btn-sm"><i class="bi bi-pencil"></i></button>
                                            <button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Devid</td>
                                        <td>Williams</td>
                                        <td>Devid@gmail.com</td>
                                        <td>User</td>
                                        <td>+1 (212) 456-7890</td>
                                        <td>
                                            <button class="btn btn-warning btn-sm"><i class="bi bi-pencil"></i></button>
                                            <button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>allen</td>
                                        <td>Nixon</td>
                                        <td>allen@gmail.com</td>
                                        <td>Agent</td>
                                        <td>+1 (212) 456-7890</td>
                                        <td>
                                            <button class="btn btn-warning btn-sm"><i class="bi bi-pencil"></i></button>
                                            <button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Add Agent modal --}}
        <div class="modal fade" id="addAgentModal" tabindex="-1" aria-labelledby="addAgentModal" data-bs-keyboard="false"
            aria-hidden="true">
            <!-- Scrollable modal -->
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="staticBackdropLabel2">Add Agent</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="fname" class="form-label fs-14 text-dark">First Name</label>
                                    <input type="text" class="form-control" id="fname"
                                        placeholder="Enter First Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="lname" class="form-label fs-14 text-dark">Last Name</label>
                                    <input type="text" class="form-control" id="lname" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label fs-14 text-dark">Email</label>
                                    <input type="email" class="form-control" id="email" placeholder="Enter Email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="role" class="form-label fs-14 text-dark">Role</label>
                                    <select id="role" class="form-select" aria-label="Role">
                                        <option selected>Select Role</option>
                                        <option value="agent">Agent</option>
                                        <option value="user">User</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="ph-no" class="form-label fs-14 text-dark">Phone Number</label>
                                    <input type="number" class="form-control" id="ph-no"
                                        placeholder="Enter Phone Number">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="pass" class="form-label fs-14 text-dark">Password</label>
                                    <input type="password" class="form-control" id="pass"
                                        placeholder="Enter Password">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Add</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection