@extends('admin.layouts.dashboard')
@section('title', 'Sale')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mt-3 mb-3">
            <h3 class="mb-2 main-heading"> Rent</h3>
        </div>
    </div>
    <div class="row">
    <div class="col-12 ">
        <!-- Tab Navigation -->
        <ul class="nav nav-tabs order-s border-0" id="myTab" role="tablist">
            <li class="active border" role="presentation">
                <a class="" id="all-bookings-tab" data-bs-toggle="tab" data-bs-target="#all-bookings" type="button" role="tab">All Bookings</a>
            </li>
            <li class="border" role="presentation">
                <a class="" id="today-pickup-tab" data-bs-toggle="tab" data-bs-target="#today-pickup" type="button" role="tab">Pickup Report</a>
            </li>
            <li class="border" role="presentation">
                <a class="" id="today-deliveries-tab" data-bs-toggle="tab" data-bs-target="#today-deliveries" type="button" role="tab">Deliveries Report</a>
            </li>
            <li class="border" role="presentation">
                <a class="" id="today-reservations-tab" data-bs-toggle="tab" data-bs-target="#today-reservations" type="button" role="tab">Reservations Report</a>
            </li>
            <li class="border" role="presentation">
                <a class="" id="forms-tab" data-bs-toggle="tab" data-bs-target="#forms" type="button" role="tab">Forms</a>
            </li>
        </ul>
         <!-- Tabs Content -->
         <div class="tab-content mt-2 bg-white p-3  shadow rounded-3" id="myTabContent">
            <div class="tab-pane fade show active" id="all-bookings" role="tabpanel">
                <h3 class="mb-4">All Bookings</h3>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>Item Name</th>
                            <th>Booking Date</th>
                            <th>Pick-up Date</th>
                            <th>Location</th>
                            <th>Rent Days</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Item A</td>
                            <td>2024-01-01</td>
                            <td>2024-01-05</td>
                            <td>Location A</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Item B</td>
                            <td>2024-01-02</td>
                            <td>2024-01-06</td>
                            <td>Location B</td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="tab-pane fade " id="today-pickup" role="tabpanel">
                <h3 class="mb-4">Today's Pickup Report</h3>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>Item Name</th>
                            <th>Booking Date</th>
                            <th>Pick-up Date</th>
                            <th>Location</th>
                            <th>Rent Days</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Item A</td>
                            <td>2024-01-01</td>
                            <td>2024-01-05</td>
                            <td>Location A</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Item B</td>
                            <td>2024-01-02</td>
                            <td>2024-01-06</td>
                            <td>Location B</td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="tab-pane fade" id="today-deliveries" role="tabpanel">
                <h3 class="mb-4">Today's Deliveries Report</h3>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>Item Name</th>
                            <th>Booking Date</th>
                            <th>Pick-up Date</th>
                            <th>Location</th>
                            <th>Rent Days</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Item A</td>
                            <td>2024-01-01</td>
                            <td>2024-01-05</td>
                            <td>Location A</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Item B</td>
                            <td>2024-01-02</td>
                            <td>2024-01-06</td>
                            <td>Location B</td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="tab-pane fade" id="today-reservations" role="tabpanel">
                <h3 class="mb-4">Today's Reservations Report</h3>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>Item Name</th>
                            <th>Booking Date</th>
                            <th>Pick-up Date</th>
                            <th>Location</th>
                            <th>Rent Days</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Item A</td>
                            <td>2024-01-01</td>
                            <td>2024-01-05</td>
                            <td>Location A</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Item B</td>
                            <td>2024-01-02</td>
                            <td>2024-01-06</td>
                            <td>Location B</td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="tab-pane fade" id="forms" role="tabpanel">
                <h3 class="mb-4">Forms</h3>
                
                <!-- Add Form for Book Service Call -->
                <h5>Add Form for Book Service Call</h5>
                <form>
                    <div class="mb-3">
                        <label for="serviceName" class="form-label">Service Name</label>
                        <input type="text" class="form-control" id="serviceName" placeholder="Enter service name">
                    </div>
                    <div class="mb-3">
                        <label for="serviceDate" class="form-label">Date</label>
                        <input type="date" class="form-control" id="serviceDate">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

                <hr>

                <!-- Add Lead Register Form -->
                <h5>Add Lead Register Form</h5>
                <form>
                    <div class="mb-3">
                        <label for="leadName" class="form-label">Lead Name</label>
                        <input type="text" class="form-control" id="leadName" placeholder="Enter lead name">
                    </div>
                    <div class="mb-3">
                        <label for="leadEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="leadEmail" placeholder="Enter email">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

                <hr>

                <!-- Upload Contact Agreement -->
                <h5>Upload Contact Agreement</h5>
                <form>
                    <div class="mb-3">
                        <label for="contactAgreement" class="form-label">Upload Agreement</label>
                        <input type="file" class="form-control" id="contactAgreement">
                    </div>
                    <button type="submit" class="btn btn-primary">Upload</button>
                </form>

                <hr>

                <!-- Customer Profile -->
                <h5>Customer Profile</h5>
                <form>
                    <h6>Customer Details</h6>
                    <div class="mb-3">
                        <label for="customerName" class="form-label">Name</label>
                        <input type="text" class="form-control" id="customerName" placeholder="Enter customer name">
                    </div>
                    <div class="mb-3">
                        <label for="customerEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="customerEmail" placeholder="Enter customer email">
                    </div>

                    <h6>Booking Details</h6>
                    <div class="mb-3">
                        <label for="bookingId" class="form-label">Booking ID</label>
                        <input type="text" class="form-control" id="bookingId" placeholder="Enter booking ID">
                    </div>
                    <div class="mb-3">
                        <label for="bookingDate" class="form-label">Booking Date</label>
                        <input type="date" class="form-control" id="bookingDate">
                    </div>
                    <button type="submit" class="btn btn-primary">Save Profile</button>
                </form>

            </div>
        </div>
    </div>
</div>
</div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>