@extends('layouts.master')

@section('content')

<main>
  <div class="px-4 py-5 my-5 text-center" style="    background-color: #fff3ea;">
     <h1 class="display-5 fw-bold"> Provider Invoices </h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>

    </div>
  </div>



  <div class="container ">
            <div>
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Invoice ID </th>
                  <th scope="col"> Invoice Date</th>
                  <th scope="col"> Invoice Status </th>
                  <th scope="col"> Quantity No.  </th>
                  <th scope="col">  Total Ammount   </th>
                </tr>
              </thead>
              <tbody class="table-group-divider">
                <tr>
                  <th scope="row">1</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>#523432</td>
                  <td>#45353</td>
                  <td>Mark</td>
                  <td>Otto</td>
                 </tr>
                <tr>
                  <th scope="row">2</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>Thornton</td>
                  <td>@fat</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                 </tr>
                <tr>
                  <th scope="row">3</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>@twitter</td>
                  <td>@fat</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                 </tr>

                <tr>
                  <th scope="row">4</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>Thornton</td>
                  <td>@fat</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                 </tr>
                <tr>
                  <th scope="row">5</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>@twitter</td>
                  <td>@fat</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                 </tr>
                <tr>
                  <th scope="row">6</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>#523432</td>
                  <td>#45353</td>
                  <td>Mark</td>
                  <td>Otto</td>
                 </tr>
                <tr>
                  <th scope="row">7</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>Thornton</td>
                  <td>@fat</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                 </tr>
                <tr>
                  <th scope="row">8</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>@twitter</td>
                  <td>@fat</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                 </tr>
                <tr>
                  <th scope="row">9</th>
                  <td> <a type="button" class=" " data-bs-toggle="modal" data-bs-target="#staticBackdrop"> #32424234 </a> </td>
                  <td>#523432</td>
                  <td>#45353</td>
                  <td>Mark</td>
                  <td>Otto</td>
                 </tr>
              </tbody>
            </table>
            </div>





<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog  modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">#23423423</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">


    <div class="row d-flex justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="d-flex flex-row p-2"> <img src="https://i.imgur.com/vzlPPh3.png" width="48">
                    <div class="d-flex flex-column"> <span class="font-weight-bold">MedLite</span> <small>#3434</small> </div>
                </div>
                <hr>
                <div class="table-responsive p-2">
                    <table class="table table-borderless">
                        <tbody>
                            <tr class="add">
                                <td>To</td>
                                <td>From</td>
                            </tr>
                            <tr class="content">
                                <td class="font-weight-bold">Provider Name <br> Bransh Address  <br>Country,Stata,City</td>
                                <td class="font-weight-bold">Customer ID <br> Packatge Type <br>  Country,Stata,City</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <hr>
                <div class="products p-2">
                    <table class="table table-borderless">
                        <tbody>
                            <tr class="add">
                                <td>Services Name</td>
                                <td>Quantity</td>
                                <td>Discount</td>
                                <td>Price</td>
                                <td class="text-center">Total</td>
                            </tr>
                            <tr class="content">
                                <td>Website Redesign</td>
                                <td>15</td>
                                <td>15</td>
                                <td>$1,500</td>
                                <td class="text-center">$22,500</td>
                            </tr>
                            <tr class="content">
                                <td>Logo & Identity</td>
                                <td>10</td>
                                <td>10</td>
                                <td>$1,500</td>
                                <td class="text-center">$15,000</td>
                            </tr>
                            <tr class="content">
                                <td>Marketing Collateral</td>
                                <td>3</td>
                                <td>3</td>
                                <td>$1,500</td>
                                <td class="text-center">$4,500</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <hr>
                <div class="products p-2">
                    <table class="table table-borderless">
                        <tbody>
                            <tr class="add">
                                <td></td>
                                <td>Subtotal</td>
                                <td>Discount</td>
                                <td>GST(10%)</td>
                                <td class="text-center">Total</td>
                            </tr>
                            <tr class="content">
                                <td></td>
                                <td>$40,000</td>
                                <td>2,500</td>
                                <td class="text-center">$42,500</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </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">Download</button>
        <button type="button" class="btn btn-primary">Print</button>
      </div>
    </div>
  </div>
</div>





  </div>



</main>


@endsection