@extends('layouts.app.master')
@section('title', 'Dashboard')


@section('content')

<h2 class="customer-listing">Service Request</h2>
<div class="card card-p-0 card-flush card-customer-table">


    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
        <div class="card-title">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <img src="assets/images/search.svg" class="serch-btn"><input type="text" data-kt-filter="search"
                    class="form-control form-control-solid w-250px ps-14" placeholder="Search Keyword">
            </div>
            <!--end::Search-->
            <!--begin::Export buttons-->
            <div id="kt_datatable_example_1_export" class="d-none"></div>
            <!--end::Export buttons-->
        </div>
        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
            <!--begin::Export dropdown-->

            <!--begin::Menu-->
            <div id="kt_datatable_example_export_menu "
                class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4 "
                data-kt-menu="true">
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-export="copy">
                        Copy to clipboard
                    </a>
                </div>
                <!--end::Menu item-->
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-export="excel">
                        Export as Excel
                    </a>
                </div>
                <!--end::Menu item-->
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-export="csv">
                        Export as CSV
                    </a>
                </div>
                <!--end::Menu item-->
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                    <a href="#" class="menu-link px-3" data-kt-export="pdf">
                        Export as PDF
                    </a>
                </div>
                <!--end::Menu item-->
            </div>
            <!--end::Menu-->
            <!--end::Export dropdown-->

            <!--begin::Hide default export buttons-->
            <div id="kt_datatable_example_buttons" class="d-none"></div>

        </div>
    </div>
    <div class="card-body">
        <table class="table align-middle table-row-dashed fs-6 g-5" id="kt_datatable_example-3">
            <thead>
                <!--begin::Table row-->
                <tr class="text-start text-white-500 fw-bold fs-7 text-uppercase th-customer">
                    <th class="min-w-50px">S.No</th>
                    <th class="min-w-50px">Product Category</th>
                    <th class="min-w-80px">Product Model </th>
                    <th class="min-w-50px">Serial No.</th>
                    <th class="min-w-50px">Warranty Period</th>
                    <th class="min-w-50px">Date & Time</th>

                    <th class="min-w-80px">ACTION</th>

                </tr>
                <!--end::Table row-->
            </thead>
            <tbody class="fw-semibold text-gray-600">
                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">1 </a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Yes</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>


                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">1 </a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>

                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">3 </a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>


                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">4 </a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>

                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">5</a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>



                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">6</a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>



                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">7</a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>



                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">8</a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Yes</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>


                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">9</a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Yes</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>


                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">10</a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>



                <tr class="odd">
                    <td><a href="#" class="text-gray-900 text-hover-primary">11</a></td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">Washing Machine</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">VY78787878</a>
                    </td>
                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">898787878</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary">2</a>
                    </td>

                    <td>
                        <a href="#" class="text-gray-900 text-hover-primary"> 19-04-2024- 4: 40 PM</a>
                    </td>

                    <td class="text-end pe-0 actions-btns-Warranty registration">


                        <button type="button" class="btn-view-more" data-bs-toggle="modal" data-bs-target="#kt_modal_3">
                            View More
                        </button>
                    </td>



                </tr>

                <!-- modal pop up -->

                <div class="modal fade" tabindex="-1" id="kt_modal_3">
                    <div class="modal-dialog">
                        <div class="modal-content position-absolute model-view-more">
                            <div class="modal-header" style="border-bottom: 0;">
                                <h2 class="modal-title heading-modal fw-extra-bold fs-40">Service Request</h2>
                                <br>


                                <!--begin::Close-->
                                <div class="btn btn-icon btn-sm btn-John Deotive-light-primary ms-2"
                                    data-bs-dismiss="modal" aria-label="Close">
                                    <img src="assets/images/close.svg" class="close-icon">

                                    <!--end::Close-->
                                </div>
                            </div>


                            <div class="modal-body">

                                <p>
                                </p>
                                <div class="card-product mt-5">

                                    <div class="row">
                                        <div class="col-lg-4">
                                            <h6 class="text-cat"> Product Category </h6>
                                            <p class="text-cat-Details">Washing Machine</p>
                                        </div>
                                        <div class="col-lg-4">
                                            <h6 class="text-cat"> Serial No. </h6>
                                            <p class="text-cat-Details">898787878</p>
                                        </div>
                                        <div class="col-lg-4">
                                            <h6 class="text-cat"> Date &amp; Time </h6>
                                            <p class="text-cat-Details">20-04-2024 4:49 PM </p>
                                        </div>

                                        <div class="col-lg-4">
                                            <h6 class="text-cat">Installation Type</h6>
                                            <p class="text-cat-Details">Washing Machine</p>
                                        </div>
                                        <div class="col-lg-4">
                                            <h6 class="text-cat">Date of Purchase</h6>
                                            <p class="text-cat-Details">20-04-2024 4:49 PM </p>
                                        </div>
                                    </div>

                                    <div class="row mt-5">
                                        <div class="col-lg-12">
                                            <h6 class="text-cat">Defect Description</h6>
                                            <p class="text-cat-Details">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                                                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                                                ullamco laboris nisi “Lorem ipsum dolor sit amet, consectetur adipiscing
                                                elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                                minim veniam, quis nostrud exercitation ullamco laboris nisi ullamco
                                                laboris nisi</p>
                                        </div>





                                        <div class="col-lg-12">
                                            <h6 class="text-cat">Address</h6>
                                            <p class="text-cat-Details">KOOLEWONG,&nbsp;New South Wales (NSW), Street
                                                2256 Main road</p>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="imges-upload">
                                                <img src="assets/images/uploaded-1.png" class="img-uploaded-back" alt="img">

                                                <img src="assets/images/uploaded-2.png" class="img-uploaded-back" alt="img">
                                            </div>

                                            <h6 class="text-cat mt-2">Is this Service Paid?</h6>
                                            <p class="text-cat-Details">KOOLEWONG,&nbsp;New South Wales (NSW), Street
                                                2256 Main road</p>
                                        </div>
                                    </div>
                                </div>



                            </div>


                        </div>
                    </div>

                    <!-- end modal -->

            </tbody>
        </table>
    </div>
</div>




@endsection