@extends('layouts.master')
@section('title')
    Izrada Računa
@endsection
@section('css')
    <!-- extra css -->
@endsection
@section('content')
    <x-breadcrumb title="Računi" pagetitle="Izrada" />
    <div class="row justify-content-center">
        <div class="col-xxl-9">
            <div class="card" id="demo">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card-header border-bottom-dashed p-4">
                            <div class="d-sm-flex">
                                <div class="flex-grow-1">
                                    <h3 class="card-logo card-logo-dark">9a5n</h3>
                                    <h3 class="card-logo card-logo-light">9a5n</h3>
                                    <div class="mt-sm-5 mt-4">
                                        <h6 class="text-muted text-uppercase fw-semibold fs-14">Adresa</h6>
                                        <p class="text-muted mb-1" id="address-details">1. Vidovčica 11a</p>
                                        <p class="text-muted mb-0" id="zip-code"><span>10000</span> Zagreb </p>
                                    </div>
                                </div>
                                <div class="flex-shrink-0 mt-sm-0 mt-3">
                                    <h6><span class="text-muted fw-normal">Email:</span> <span
                                            id="email">info@9a5n.hr</span></h6>
                                    <h6><span class="text-muted fw-normal">Stranica:</span> <a
                                            href="https://9a5n.hr/" class="link-primary" target="_blank"
                                            id="website">www.9a5n.hr</a></h6>
                                    <h6 class="mb-0"><span class="text-muted fw-normal">Kontakt Broj: </span><span
                                            id="contact-no"> +(385) 95 865 2713</span></h6>
                                </div>
                            </div>
                        </div>
                        <!--end card-header-->
                    </div>
                    <!--end col-->
                    <div class="col-lg-12">
                        <div class="card-body p-4">
                            <div class="row g-3">
                                <div class="col-lg-3 col-6">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold fs-14">Datum izrade</p>
                                    <h5 class="fs-15 mb-0"><span id="invoice-date">{{ date('d-m-Y') }}</span></h5>
                                </div>
                                <!--end col-->
                                <div class="col-lg-3 col-6">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold fs-14">Način plačanja</p>
                                    <span class="badge badge-soft-success" id="payment-status">Paid</span>
                                </div>
                                <!--end col-->
                                <div class="col-lg-3 col-6">
                                    <p class="text-muted mb-2 text-uppercase fw-semibold fs-14">Ukupni Iznos</p>
                                    <h5 class="fs-15 mb-0">€<span id="total-amount">{{ Cart::total() }}</span> EUR</h5>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end col-->
                    <div class="col-lg-12">
                        <div class="card-body p-4 border-top border-top-dashed">
                            <div class="row g-3">
                                <div class="col-6">
                                    <h6 class="text-muted text-uppercase fw-semibold fs-14 mb-3">Detalji Kupca</h6>
                                    <p class="fw-medium mb-2 fs-16" id="billing-name">{{ $customer->name }}</p>
                                    <p class="text-muted mb-1" id="billing-address-line-1">{{ $customer->address }}, {{ $customer->zip_code }} {{ $customer->city }}</p>
                                    <p class="text-muted mb-1"><span>Kontakt Broj: </span><span id="billing-phone-no">{{ $customer->phone }}</span></p>
                                    <p class="text-muted mb-0"><span>Email Adresa: </span><span id="billing-tax-no">{{ $customer->email }}</span>
                                    </p>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end col-->
                    <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" style="width: 50px;">#</th>
                                            <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">
                                        @php
                                        $s1 = 1;
                                        @endphp

                                        @foreach($contents as $key=> $item)
                                        <tr>
                                            <td scope="row">{{ $s1++ }}</td>
                                            <td class="text-start">
                                                <span class="fw-medium">{{ $item->name }}</span>
                                            </td>
                                            <td>{{ $item->qty }}</td>
                                            <td>€{{ $item->price }}</td>
                                            <td class="text-end">€{{ $item->price*$item->qty }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <!--end table-->
                            </div>
                            <div class="border-top border-top-dashed mt-2">
                                <table class="table table-borderless table-nowrap align-middle mb-0 ms-auto"
                                    style="width:250px">
                                    <tbody>
                                        <tr>
                                            <td>Iznos</td>
                                            <td class="text-end">€{{ Cart::subtotal() }}</td>
                                        </tr>
                                        <tr class="border-top border-top-dashed fs-15">
                                            <th scope="row">Ukupni Iznos</th>
                                            <th class="text-end">€{{ Cart::total() }} EUR</th>
                                        </tr>
                                    </tbody>
                                </table>
                                <!--end table-->
                            </div>
                            <div class="mt-3">
                                <h6 class="text-muted text-uppercase fw-semibold mb-3">Detalji Plačanja:</h6>
                                <p class="text-muted mb-1">Način Plačanja: <span class="fw-medium"
                                        id="payment-method">Dug</span></p>
                                <p class="text-muted">Ukupni Iznos: <span class="fw-medium">€ </span><span
                                        id="card-total-amount">{{ Cart::total() }} EUR</span></p>
                            </div>
                            <div class="mt-4">
                                <div class="alert alert-info">
                                    <p class="mb-0"><span class="fw-semibold">Dodatne informacije(bilješke):</span>
                                        <span id="note">
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                                <a href="#" class="btn btn-success"><i
                                        class="ri-printer-line align-bottom me-1"></i> Ispis</a>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#invoice-modal"><i
                                        class="ph-floppy-disk align-bottom m-1"></i> Spremi</button>
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
            </div>
            <!--end card-->
        </div>
        <!--end col-->
    </div>
    <!--end row-->


    <div class="modal fade" id="invoice-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header px-4 m-auto">
                    <h5 class="modal-title" id="exampleModalLabel">Račun za {{ $customer->name }}</h5>
                </div>
                <div class="modal-header px-4 m-auto">
                    <h5 class="modal-title" id="exampleModalLabel">Ukupni iznos €{{ Cart::total() }} EUR</h5>
                </div>
                <form class="tablelist-form" novalidate autocomplete="off" method="post" action="{{ url('/final-invoice') }}">
        	        @csrf
                    <div class="modal-body p-4">
                        <div id="alert-error-msg" class="d-none alert alert-danger py-2"></div>
                        <input type="hidden" id="id-field" />

                        <!-- <div class="mb-3" id="modal-id">
                                    <label for="orderId" class="form-label">User ID</label>
                                    <input type="text" id="orderId" class="form-control" placeholder="ID" readonly />
                                </div> -->



                        <div class="mb-3">
                            <label for="payment" class="form-label">Način Plaćanja</label>
                            <select name="payment_status" class="form-select">
                                <option selected disabled>Odaberi način plaćanja</option>
                                <option value="Dug">Dug</option>
                                <option value="Gotovina">Gotovina</option>
                                <option value="Uplata">Uplata</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="user-name" class="form-label">Plaćeni Iznos</label>
                            <input type="text" name="pay" id="user-name-field" class="form-control" placeholder="Upiši koliko je odmah plaćeno"
                                required />
                        </div>
                        <div class="mb-3">
                            <label for="user-name" class="form-label">Preostalo za platiti (Dugovanje)</label>
                            <input type="text" name="due" id="user-name-field" class="form-control" placeholder="Upiši koliko je ostalo za platiti (Dug)"
                                required />
                        </div>

                        <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                        <input type="hidden" name="order_date" value="{{ date('d-F-Y') }}">
                        <input type="hidden" name="order_status" value="pending">
                        <input type="hidden" name="total_products" value="{{ Cart::count() }}">
                        <input type="hidden" name="sub_total" value="{{ Cart::subtotal() }}">
                        <input type="hidden" name="vat" value="{{ Cart::tax() }}">
                        <input type="hidden" name="total" value="{{ Cart::total() }}">


                    </div>
                    <div class="modal-footer">
                        <div class="hstack gap-2 justify-content-end">
                            <button type="button" class="btn btn-ghost-danger" data-bs-dismiss="modal">Zatvori</button>
                            <button type="submit" class="btn btn-success" id="add-btn">Dodaj</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


@endsection
@section('scripts')
    <script src="{{ URL::asset('assets/js/backend/invoicedetails.js') }}"></script>

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