@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">Lead Details</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ url('/lead') }}">Lead Screen</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Lead Details</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">
                            Deposit
                        </div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#exampleModalScrollable2">
                            <i class="bi bi-plus"></i> Add Deposit
                        </button>

                        {{-- <button class="btn btn-primary">
                            <i class="bi bi-plus"></i> Add Deposit
                        </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>Lead Name</th>
                                        <th>Agent Name</th>
                                        <th>Country</th>
                                        <th>Date</th>
                                        <th>Deposit</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Lead 1</td>
                                        <td>Tiger Nixon</td>
                                        <td>United States</td>
                                        <td>18/08/2021</td>
                                        <td>$120,800</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>Lead 1</td>
                                        <td>Garrett Winters</td>
                                        <td>Canada</td>
                                        <td>09/08/2023</td>
                                        <td>$70,750</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>Lead 1</td>
                                        <td>Ashton Cox</td>
                                        <td>Germany</td>
                                        <td>09/05/2024</td>
                                        <td>$129,250</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>

        <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">
                            Comments
                        </div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addCommentModal">
                            <i class="bi bi-plus"></i> Add Comment
                        </button>

                        {{-- <button class="btn btn-primary">
                            <i class="bi bi-plus"></i> Add Deposit
                        </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>Date</th>
                                        <th>Comment</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>18/08/2021</td>
                                        <td>
                                            <p class="w-50 mb-0">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                                Quo non magnam rem consequuntur impedit modi </p>
                                        </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>09/08/2023</td>
                                        <td>
                                            <p class="w-50 mb-0">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                                Quo non magnam rem consequuntur impedit modi </p>
                                        </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>09/05/2024</td>
                                        <td>
                                            <p class="w-50 mb-0">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                                Quo non magnam rem consequuntur impedit modi </p>
                                        </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 Deposit modal --}}
        <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" aria-labelledby="exampleModalScrollable2"
            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 Deposit</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label for="d-name" class="form-label fs-14 text-dark">Deposit Name</label>
                        <input type="text" class="form-control mb-2" id="d-name" placeholder="Enter Deposit Name">
                        <label for="amount" class="form-label fs-14 text-dark">Deposit Amount</label>
                        <div class="input-group mb-3">
                            <span class="input-group-text">$</span>
                            <input type="number" id="amount" class="form-control"
                                aria-label="Amount (to the nearest dollar)" placeholder="Enter Deposit Amount">
                            {{-- <span class="input-group-text">.00</span> --}}
                        </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>

        {{-- Add Comment modal --}}
        <div class="modal fade" id="addCommentModal" tabindex="-1" aria-labelledby="addCommentModal"
            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">Comment</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label for="date" class="form-label fs-14 text-dark">Date</label>
                        <input type="date" id="date" class="form-control mb-2">
                        <label for="comm" class="form-label fs-14 text-dark">Comment</label>
                        <textarea class="form-control" id="comm" rows="4" placeholder="Write comment here..."></textarea>
                    </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