@extends('admin_dashboard')
@section('admin')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>

    body {
        font-family: 'CircularStd', sans-serif;
        font-size: 11px;
        color: #1f1f1f;
        line-height: 1;
    }

    /* fieldset{
        border: 1px solid gray;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-left: 13px;
    } */
    fieldset{
        border: 1px solid gray;
        padding-right: 17px;
        padding-left: 17px !important;
        margin-bottom: 0px;
    }
    .payment-fieldset {
        border: 1px solid gray;
        padding-right: 0px;
        padding-left: 0px !important;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 7px;
    }

    /* legend {
        font-size:16px;
        font-weight:bold;
    } */
    .table thead th {
        font-weight: 500;
        letter-spacing: 0.05em;
    }
    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }
    .modal-content {
        width: 65%;
        border: 1px solid #FFFFFF;
        border-radius: 0rem;
        position: absolute;
        left: 30%;
        max-height: 500px;
    }
    .modal-content {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        padding: 20px;
    }
    .minput {
        height: 30px;
        margin-bottom: 10px;
        font-size: 14px;
    }
    element.style {
        color: #f62d51;
        height: 62px;
        width: 95%;
        text-align: center;
        font-size: 25px;
        background-color: #dddddd;
        border: none;
    }

    .modal-dialog {
        position: relative;
        width: auto;
        margin: .5rem;
        padding: 10px;
        pointer-events: none;
    }
    .fieldsetinvoice {
        border: 1px solid #21d0d0;
        position: relative; /* Required for positioning the legend */
    }

    .fieldsetinvoice legend {
        font-size: 14px; /* Adjust font size */
        font-weight: bold; /* Make it bold for better visibility */
        text-align: left; /* Center align the text (optional) */
        padding: 0 5px; /* Add padding around the text */
        color: #494a4a; /* Set legend text color */
        background: white; /* Match the background of your form/page */
        position: relative; /* Position the legend */
        top: -7px; /* Align the legend with the fieldset border */
        left: 10px; /* Adjust horizontal position (optional) */
        z-index: 1; /* Ensure legend appears above the border */
        width: 30%;
    }
    #product-legend{
        width: 15%;
    }
    label {
        display: inline-block;
        font-size:12px !important;
        font-weight:600;
        margin-bottom: .0rem;
        margin-top: 1px;
        /* margin-: 5px; */
    }

    .form-control {
        display: block;
        width: 100%;
        height: 26px;
        padding: 1px 1px;
        padding-right:3px;
        padding-left:3px;
        line-height: 1;
        font-size: 13px;
        margin-bottom: 0px;
    }

    .btn:hover {
        background-color: #818D94;
    }
    .btn:focus {
        background-color: #818D94;
    }
    .butn {
        font-weight:normal;
        font-size: 7px;
        background-color:#ff0606;
        padding-right:18px;
        border-radius:5px;
    }
    .butn:hover {
        background-color:red;
    }
    .formbtn, .bill-hold{
        margin-top:0px;
        margin-bottom: 2px;
        padding: 2px;
    }

    input
    {
        height:30px;
        margin-bottom:10px;
        font-size:14px;
    }
    .table-container {
        max-height: 200px; /* Sets the maximum height */
        overflow-y: auto; /* Enables vertical scrolling */
        border: 1px solid #ccc; /* Optional: Add a border around the container */
    }
    table {
        margin:10xp;
        width: 100%; /* Ensures the table spans the container width */
        border-collapse: collapse; /* Optional: Ensures cleaner borders */
    }
    .table td, .table th {
        padding: .3rem;
        border: #494a4a;
        border-spacing: 1;
        border: 1px solid #494a4a; /* Adds a border with the desired color */
    }
    .table th {
        background-color:#037683;
        color: #ffffff;
        font-weight: 600;

    }
    .table-bordered td, .table-bordered th {
        border: 1px solid #494a4a;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        position: relative;
        /* width: 100%; */
        padding-right: 3px;
        padding-left: 3px;
    }
    .modal-content {
        width: 65%;
        border: 1px solid #FFFFFF;
        border-radius: 0rem;
        position: absolute;
        left:30%;
        max-height:600px;
    /*overflow-y: auto;
    top: 50%;
    transform: translate(-50%, -50%);*/
    }
    .modal-content1 {
        width: 95%;
        left: 15%;
    }
    input{
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-variant-position: ;
    font-variant-emoji: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    font-optical-sizing: ;
    font-size-adjust: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: field;
    margin: 0em;
    padding: 1px 0px;
    border-width: 2px;
    border-style: inset;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    padding-block: 1px;
    padding-inline: 2px;
}
</style>
<div class="content">
    <div class="container-fluid">

        <div class="row">
            <h5 style="text-align: center; background:#15B3C6; color:white; padding:10px; margin-top:5px;">Order List</h5>
            <div class="col-lg-12 col-xl-12">
                {{-- <div class="card">
                    <div class="card-body"> --}}
                        <div class="tab-pane" id="settings">
                            <div class="col-lg-12 col-md-12 table-container">
                                <table class="table table-striped border border-dark table-auto text-center" id="myTable">
                                    <thead>

                                    <th>SL</th>
                                    <th>Order Id</th>
                                    <th>Date</th>
                                    <th>Invoice No</th>
                                    <th>Customer Name</th>
                                    <th>Customer Address</th>
                                    <th>Total Quantity</th>
                                    <th>Order Amount</th>
                                    <th>Previous Due</th>
                                    <th>Due</th>
                                    {{-- <th>Confirm</th>
                                    <th>Details</th> --}}
                                    <th>Status</th>
                                    <th>Cancel</th>
                                    <th>Delete</th>
                                    </thead>
                                    <tbody style="background-color: #f6f4e3">
                                        @foreach ($sales_orders as $sl=>$item)
                                            <tr>
                                                <td>{{ $sl + 1 }}</td>
                                                <td>{{ $item->id }}</td>
                                                <td>{{ $item->order_date }}</td>
                                                <td>{{ $item->invoice_no }}</td>
                                                <td>{{ $item->customer->name }}</td>
                                                <td>{{ $item->customer->address }}</td>
                                                <td>{{ $item->total_products }}</td>
                                                <td>{{ $item->sub_total }}</td>
                                                <td>{{ $item->previous_due }}</td>
                                                <td>{{ $item->due }}</td>
                                                <td style="padding:1px !important">
                                                    @if($item->order_status == 1)
                                                        Pending
                                                    @elseif($item->order_status == 2)
                                                        Confirmed
                                                    @elseif($item->order_status == 3)
                                                        Completed
                                                    @elseif($item->order_status == 4)
                                                        Canceled
                                                    @else
                                                        Unknown
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('order.details.view',$item->invoice_no) }}">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    {{-- </div>
                </div> <!-- end card--> --}}
            </div> <!-- end col -->
        </div> <!-- end row-->




    </div> <!-- container -->
</div> <!-- content -->
@endsection