@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 Details</h5>
            <div class="col-lg-12 col-xl-12">
                <div class="card" style="margin-bottom: 0px; padding-bottom:0px;">
                    <div class="card-body">
                        <div class="tab-pane" id="settings">
                            <div class="col-lg-12 col-md-12 ">
                                <form method="post" action="{{ route('order.status.update') }}" enctype="multipart/form-data" style="margin-bottom: 20px;">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $order->id }}">
                                    {{-- <h5 class="mb-4 text-uppercase"><i class="mdi mdi-account-circle me-1"></i> Order Details</h5> --}}

                                    <div class="row">


                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Customer Image</label>
                                                <img id="showImage" src="{{ asset($order->customer->image ) }}" class="rounded-circle avatar-lg img-thumbnail"
                                                    alt="profile-image">

                                            </div>
                                        </div>


                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Customer Name</label>
                                                <p class="text-danger"> {{ $order->customer->name }} </p>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Customer Email</label>
                                                <p class="text-danger"> {{ $order->customer->email }} </p>
                                            </div>
                                        </div>


                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Customer Phone</label>
                                                <p class="text-danger"> {{ $order->customer->phone }} </p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Customer Address</label>
                                                <p class="text-danger"> {{ $order->customer->address }} </p>
                                            </div>
                                        </div>


                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Order Date </label>
                                                <p class="text-danger"> {{ $order->order_date }} </p>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Order Invoice </label>
                                                <p class="text-danger"> {{ $order->invoice_no }} </p>
                                            </div>
                                        </div>




                                        {{-- <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="firstname" class="form-label">Payment Status </label>
                                                    <p class="text-danger"> {{ $order->payment_status }} </p>
                                                </div>
                                            </div> --}}

                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Invoice Total </label>
                                                <p class="text-danger"> {{ $order->sub_total }} </p>
                                            </div>
                                        </div>

                                        {{-- <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Paid Amount </label>
                                                <p class="text-danger"> {{ $order->pay }} </p>
                                            </div>
                                        </div> --}}


                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">Previous Due </label>
                                                <p class="text-danger"> {{ $order->previous_due }} </p>
                                            </div>
                                        </div>
                                    </div> <!-- end row -->
                                    <div class="row" style="margin:0px;">
                                        <div class="col-lg-6 col-md-6 col-xl-6" style="margin:0px;">
                                            <div class="text-end float-left" style="margin:0px;">
                                                <a href="{{ route('change.order.status.confirm',$order->invoice_no) }}" type="button" class="btn btn-success waves-effect waves-light mt-2"><i class="mdi mdi-content-save"></i> Confirm Order </a>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-xl-6" style="margin:0px;">
                                            <div class="text-end" style="margin:0px;">
                                                <a href="{{ route('change.order.status.cancel',$order->invoice_no) }}" type="button" class="btn btn-danger waves-effect waves-light mt-2"><i class="mdi mdi-content-save"></i> Cancel Order </a>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <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>Product Id</th>
                                    <th>Product Code</th>
                                    <th>Product Name</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                    <th>Discount Amount</th>
                                    <th>Total</th>
                                    </thead>
                                    <tbody style="background-color: #f6f4e3">
                                        @foreach ($orderItem as $sl=>$item)
                                            <tr>
                                                <td>{{ $sl + 1 }}</td>
                                                <td>{{ $item->product->id }}</td>
                                                <td>{{ $item->product->product_code }}</td>
                                                <td>{{ $item->product->product_name }}</td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>{{ $item->unitcost }}</td>
                                                <td>{{ $item->discount_amount }}</td>
                                                <td>{{ $item->total }}</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