@extends('layouts.new-layout')
@section('title', 'Rental Detail')
@section('content')

    @include('partials.parallaxSlider', ['title' => 'Softub Sales'])

      <section class="padding-top">
      <div class="container my-5">
        <h1 class="text-center mb-4">Reports and Forms</h1>

        <!-- Tabs Navigation -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="all-bookings-tab" data-bs-toggle="tab" data-bs-target="#all-bookings" type="button" role="tab">All Bookings</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="today-pickup-tab" data-bs-toggle="tab" data-bs-target="#today-pickup" type="button" role="tab">Today's Pickup Report</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="today-deliveries-tab" data-bs-toggle="tab" data-bs-target="#today-deliveries" type="button" role="tab">Today's Deliveries Report</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="today-reservations-tab" data-bs-toggle="tab" data-bs-target="#today-reservations" type="button" role="tab">Today's Reservations Report</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="forms-tab" data-bs-toggle="tab" data-bs-target="#forms" type="button" role="tab">Forms</button>
            </li>
        </ul>

        <!-- Tabs Content -->
        <div class="tab-content mt-3" id="myTabContent">
            <div class="tab-pane fade show active" id="all-bookings" role="tabpanel">
                <h3>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>Today's Pickup Report</h3>
                <p>Content for Today's Pickup Report goes here...</p>
            </div>

            <div class="tab-pane fade" id="today-deliveries" role="tabpanel">
                <h3>Today's Deliveries Report</h3>
                <p>Content for Today's Deliveries Report goes here...</p>
            </div>

            <div class="tab-pane fade" id="today-reservations" role="tabpanel">
                <h3>Today's Reservations Report</h3>
                <p>Content for Today's Reservations Report goes here...</p>
            </div>

            <div class="tab-pane fade" id="forms" role="tabpanel">
                <h3>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>
      </section>

    @endsection