@extends('layouts.master')
@section('title')
    Detalji Računa
@endsection
@section('css')
    <!-- extra css -->
    <!--Swiper slider css-->
    <link href="{{ URL::asset('assets/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')
    <x-breadcrumb title="Računi" pagetitle="Detalji" />

    <div class="row">
        <div class="col-xxl-9">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <!--end col-->
                        <form method="post" action="{{ route('order.status.update') }}">
                        @csrf

                        <input type="hidden" name="id" value="{{ $order->id }}">

                        <div class="col-lg-9">
                            <div class="d-flex border-bottom border-bottom-dashed pb-3 mb-3 mt-4 mt-lg-0">
                                <div class="flex-grow-1">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold fs-14">Račun za</p>
                                    <h5>{{ $order->customer->name }}</h5>
                                    <p class="text-muted mb-0">{{ $order->customer->address }}, {{ $order->customer->zip_code }} {{ $order->customer->city }}</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="table-responsive">
                                        <div class="mb-6">
                                            <label for="user-name" class="form-label">Datum Odrade</label>
                                            <p class="text-danger">{{ $order->order_date }}</p>
                                        </div>
                                        <div class="mb-6">
                                            <label for="user-name" class="form-label">Broj Računa</label>
                                            <p class="text-danger">{{ $order->invoice_no }}</p>
                                        </div>
                                        <div class="mb-6">
                                            <label for="user-name" class="form-label">Način Plaćanja</label>
                                            <p class="text-danger">{{ $order->payment_status }}</p>
                                        </div>
                                        <div class="mb-6">
                                            <label for="user-name" class="form-label">Plaćeni Iznos</label>
                                            <p class="text-danger">{{ $order->pay }}</p>
                                        </div>
                                        <div class="mb-6">
                                            <label for="user-name" class="form-label">Preostalo za Platiti</label>
                                            <p class="text-danger">{{ $order->due }}</p>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary"><i
                                        class="ph-floppy-disk align-bottom m-1"></i> Završi Nalog</button>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <!--end col-->
                        </form>
                    </div>
                    <!--end row-->

                    <div class="col-lg-12">
                        <div class="card-body p-4">
                            <div class="table-responsive">
                                <table class="table table-borderless text-center table-nowrap align-middle mb-0">
                                    <thead>
                                        <tr class="table-active">
                                            <th scope="col">Naziv Usluge</th>
                                            <th scope="col">Broj Sati</th>
                                            <th scope="col">Cijena po satu</th>
                                            <th scope="col" class="text-end">Ukupno</th>
                                        </tr>
                                    </thead>
                                    <tbody id="products-list">
                                        @foreach($orderItem as $key=> $item)
                                        <tr>
                                            <td class="text-start">
                                                <span class="fw-medium">{{ $item->service->service_name }}</span>
                                            </td>
                                            <td>{{ $item->quantity }}</td>
                                            <td>€{{ $item->service->selling_price }}</td>
                                            <td class="text-end">€{{ $item->total }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <!--end table-->
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end col-->


                </div>
            </div>
    </div>
    <!--end row-->

@endsection
@section('scripts')
    <!--Swiper slider js-->
    <script src="{{ URL::asset('assets/libs/swiper/swiper-bundle.min.js') }}"></script>

    <!--Account init js-->
    <script src="{{ URL::asset('assets/js/backend/account.init.js') }}"></script>

    <!-- App js -->
    <script src="{{ URL::asset('assets/js/app.js') }}"></script>
@endsection