@extends('layouts/contentNavbarLayout')

@section('title', 'فاکتور')

@section('vendor-style')
    <link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}">
@endsection

@section('vendor-script')
    <script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
@endsection

@section('page-script')
    <script src="{{asset('assets/js/dashboards-analytics.js')}}"></script>
{{--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>--}}
    <script>
        $(document).ready(function () {
            $('.meterage-input, .metrage-price-input').on('input', function () {
                const row = $(this).closest('tr');
                const meterage = parseFloat(row.find('.meterage-input').val()) || 0;
                const metragePrice = parseFloat(row.find('.metrage-price-input').val().replaceAll(',', '')) || 0;

                // Calculate the price as a float
                let price = meterage * metragePrice;

                // Format the number as a string with a comma separator and no decimal places
                price = price.toLocaleString('en-US', { style: 'decimal', maximumFractionDigits: 0 });

                row.find('.price-cell').text(price);
            });
        });
    </script>

    <script>
        function CheckMeterage()
        {
            let allSuccess = true;
            let htmlAlert = 'اروری رخ داده است.';
            const meterageInputs = document.querySelectorAll('td[datatype="false"]');
            meterageInputs.forEach(function (input) {
               if (input.textContent == '' || input.textContent == 0 || input.textContent == 'undefined' || input.textContent == null){
                   htmlAlert = `
                    <div class="alert alert-danger custom-alert alert-dismissible" role="alert">
                      لطفا تمامی اقلام فاکتور را به درستی وارد کنید!
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                      </button>
                    </div>
                   `;

               }else{
                   htmlAlert = `
                    <div class="alert alert-danger custom-alert alert-dismissible" role="alert">
                      لطفا اقلام فاکتور را تایید کنید!
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                      </button>
                    </div>
                   `;
               }
                document.getElementById('alertSections').innerHTML = htmlAlert;
                allSuccess = false
                return null;
            });
            if(allSuccess){
                document.getElementById('invoice_form').submit()
            }
        }
    </script>
@endsection

@section('content')

    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">سفارشات /  لیست /</span> {{ $invoice['id'] }}
    </h4>

    <div id="alertSections">
        @include('components.errors')
    </div>

    <a href="{{ route('dashboard.invoices.factor', $invoice['id']) }}" class="btn {{ !in_array($invoice['status'], [3,4]) ? 'disabled btn-gray text-dark' : 'btn-primary' }} p-2"> نمایش فاکتور </a>
    <div class="card-body mb-5">
        <form method="post" id="invoice_form" enctype="multipart/form-data"
              action="{{ route('dashboard.invoices.update', ['invoice' => $invoice['id']]) }}">
            @csrf
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">نام کاربری</label>
                <div class="col-sm-10">
                    <div class="input-group input-group-merge">
                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                    class="bx bx-file"></i></span>
                        <input  type="text" class="form-control" disabled value="{{ ($invoice['user']['first_name'] ?? '') . ' - ' . ($invoice['user']['last_name'] ?? '') }}"
                               id="basic-icon-default-fullname" placeholder="Title" aria-label="نام"
                               aria-describedby="basic-icon-default-fullname2">
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">آدرس</label>
                <div class="col-sm-10">
                    <div class="input-group input-group-merge">
                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                    class="bx bxs-factory"></i></span>
                        <input  type="text" class="form-control" name="address" disabled value="{{ ($invoice['address'] ?? '') }} - {{ $invoice['user']['phone'] }}"
                               id="basic-icon-default-fullname" placeholder="آدرس   " aria-label="نام"
                               aria-describedby="basic-icon-default-fullname2">
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">شماره تماس و توضیحات</label>
                <div class="col-sm-10">
                    <div class="input-group input-group-merge">
                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                    class="bx bxs-phone"></i></span>
                        <input  type="text" class="form-control" name="phone_number" value="{{ ($invoice['phone_number'] ?? '') }}"
                               id="basic-icon-default-fullname" placeholder="شماره تماس و توضیحات" aria-label="نام"
                               aria-describedby="basic-icon-default-fullname2">
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">وضعیت</label>
                <div class="col-sm-10">
                    <div class="mt-2 mb-3">
                        <select id="defaultSelect" name="status" class="form-select form-select-lg">
                            <option {{ $invoice['status'] == 0 ? 'selected' : null }} disabled class="disabled" style="opacity: .5;">در انتظار تایید </option>
                            <option {{ $invoice['status'] == 1 ? 'selected' : null }} value="1" class="text-primary">در انتظار واریزی</option>
                            <option {{ $invoice['status'] == 2 ? 'selected' : null }} disabled class="disabled" style="opacity: .5;" value="2">در انتظار تایید واریزی</option>
                            <option {{ $invoice['status'] == 3 ? 'selected' : null }} value="3" style="color: #03a6c9">در انتظار ارسال</option>
                            <option {{ $invoice['status'] == 4 ? 'selected' : null }} value="4" class="text-success">ارسال شده</option>
                            <option {{ $invoice['status'] == 5 ? 'selected' : null }} value="5" class="text-danger">رد شده</option>
                        </select>
                    </div>
                    <small class="text-info"> توجه داشته باشید در صورت تغییر وضعیت به <b> در انتظار واریزی</b> امکان تغییر قیمت و ویژگی‌های فاکتور نمی‌باشید </small>
                    <br>
                    <small class="text-primary"> در صورت انتخاب وضعیت به <b> در انتظار واریزی</b> پیامی در رابطه با ارسال فیش واریزی برای کاربر ارسال خواهد شد. </small>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">شماره کارت ارسالی</label>
                <div class="col-sm-10">
                    <div class="mt-2 mb-3">
                        <select id="defaultSelect" name="card_id" class="form-select form-select-lg">
                            <option {{ $invoice['card_id'] == null ? 'selected' : null }} disabled>انتخاب نشده </option>
                            @foreach(App\Models\Card::query()->latest('id')->get() as $card)
                                <option {{ $invoice['card_id'] == $card->id ? 'selected' : null }} value="{{ $card->id }}"> {{ preg_replace('/(\d{4})(\d{4})(\d{4})(\d{4})/', '$1-****-$4', $card->card_number) }} - {{ $card->card_owner }} </option>
                            @endforeach
                        </select>
                    </div>
                    <small class="text-primary"> فقط در صورتی که وضعیت فاکتور را در حالت در انتظار واریزی قرار داده‌اید شماره کارت را تغییر دهید. در غیر این صورت به کاربر اطلاعی داده نخواهد شد.</small>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">توضیحات</label>
                <div class="col-sm-10">
                    <div class="input-group input-group-merge">
                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                    class="bx bx-file"></i></span>
                        <textarea  type="text" class="form-control" name="desc"
                               id="basic-icon-default-fullname" placeholder="توضیحات مورد نظر خود را بنویسید. این توضیحات هنگام تغییر وضعیت فاکتور به کاربر ارسال می‌شود" aria-label="نام"
                               aria-describedby="basic-icon-default-fullname2">{{ $invoice['desc'] ?? '' }}</textarea>
                    </div>
{{--                    <small class="text-danger"> این مقدار به صورت خودکار پر خواهد شد. در صورت تغییر دقت داشته باشید قیمت آیتم‌های فاکتور را تغییر ندهید. </small>--}}
                </div>
            </div>

            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">قیمت کل</label>
                <div class="col-sm-10">
                    <div class="input-group input-group-merge">
                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                    class="bx bx-file"></i></span>
                        <input  type="text" class="form-control h-number" disabled name="total_price" value="{{ $invoice['total_price'] ?? '0' }}"
                               id="basic-icon-default-fullname" placeholder="قیمت کل" aria-label="نام"
                               aria-describedby="basic-icon-default-fullname2">
                    </div>
{{--                    <small class="text-danger"> این مقدار به صورت خودکار پر خواهد شد. در صورت تغییر دقت داشته باشید قیمت آیتم‌های فاکتور را تغییر ندهید. </small>--}}
                </div>
            </div>
{{--            <div class="row mb-3">--}}
{{--                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">مبلغ واریزی</label>--}}
{{--                <div class="col-sm-10">--}}
{{--                    <div class="input-group input-group-merge">--}}
{{--                        <span id="basic-icon-default-fullname2" class="input-group-text"><i--}}
{{--                                    class="bx bx-file"></i></span>--}}
{{--                        <input  type="text" class="form-control h-number" name="paid_amount" value="{{ $invoice['paid_amount'] ?? '0' }}"--}}
{{--                               id="basic-icon-default-fullname" placeholder="قیمت کل" aria-label="نام"--}}
{{--                               aria-describedby="basic-icon-default-fullname2">--}}
{{--                    </div>--}}
{{--                    <small class="text-danger"> این مقدار به صورت خودکار پر خواهد شد. در صورت تغییر دقت داشته باشید قیمت آیتم‌های فاکتور را تغییر ندهید. </small>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div class="row justify-content-end">
                <div class="col-sm-10">
                    <button type="button" onclick="CheckMeterage()" class="btn btn-primary">ارسال</button>
                </div>
            </div>

{{--            <div class="mb-5 mt-5">--}}
{{--                <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">عکس فیش ارسال شده توسط کاربر</label>--}}
{{--                <div class="col-sm-12">--}}
{{--                    <div class="input-group input-group-merge">--}}
{{--                        @if($invoice['file'])--}}
{{--                            <div style="min-width: 20rem; height: auto" class="text-center m-auto overflow-hidden">--}}
{{--                                <img src="/storage/invoices/{{ $invoice['user_id'].DIRECTORY_SEPARATOR.$invoice['id'].DIRECTORY_SEPARATOR.$invoice['file'] }}" alt="">--}}
{{--                            </div>--}}
{{--                        @else--}}
{{--                            <h3 class="w-100 text-center opacity-75"> تصویری ارسال نشده است! </h3>--}}
{{--                        @endif--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

        </form>
    </div>
    <div class="row">
        <h3 class="d-inline">جزئیات پرداختی</h3>
        @forelse($invoice['bills'] as $bill)
            <a href="{{route('dashboard.bills.edit', $bill['id']) }}"> فیش شماره {{ $bill['id'] }} </a>
            @empty
            <span> پرداختی وجود ندارد </span>
        @endforelse
    </div>
    <div class="row justify-content-end pb-3 pt-1">
        <a href="{{ route('dashboard.stocks.codes.create', ['stock' => $invoice['id']]) }}" class="col-sm-12">
{{--            <button type="submit" class="btn btn-secondary"><i class="bx bx-plus"></i>ایجاد کد محصول جدید</button>--}}
        </a>
    </div>
    <div class="row">
        <h3 class="d-inline">جزئیات سفارش</h3>
        <h5 class="card-header d-inline">کد های {{ $invoice['id'] }} </h5>
        <div class="col-md-12 overflow-auto">
        <form method="post" enctype="multipart/form-data"
              action="{{ route('dashboard.invoices.update.cart', ['invoice' => $invoice['id']]) }}">
            <table class="table table-striped" style="min-width: 38rem;">
                <thead>
                <tr class="line">
                    <td><strong>#</strong></td>
                    <td class="text-center"><strong>نام محصول</strong></td>
                    <td class="text-center"><strong>تعداد طاقه</strong></td>
                    <td class="text-center"><strong>متراژ</strong></td>
                    <td class="text-center"><strong>قیمت هر متر</strong></td>
                    <td class="text-center"><strong>قیمت کل</strong></td>
                </tr>
                </thead>
                <tbody>

                    @foreach($invoice['products'] as $index => $row)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td><strong>{{ $row['code']['stock']['name'] }}  {{ $row['code']['name'] }}</strong></td>
                            <td class="text-center">
                                <input type="number" class="text-center form-control "
                                       name="invoice_product[{{$row['id']}}][count]" value="{{ ($row['count']) }}" id="basic-icon-default-fullname"
                                       placeholder="تعداد" aria-label="تعداد" aria-describedby="basic-icon-default-fullname2">
                            </td>
                            <td class="text-center">
                                <input type="text" class="text-center form-control meterage-input"
                                       name="invoice_product[{{$row['id']}}][meterage]" value="{{ ($row['meterage']) }}"
                                       id="basic-icon-default-fullname" placeholder="متراژ" aria-label="تعداد"
                                       aria-describedby="basic-icon-default-fullname2">
                            </td>
                            <td class="text-center">
                                <input type="text" class="text-center h-number form-control metrage-price-input"
                                       name="invoice_product[{{$row['id']}}][metrage_price]" value="{{ ($row['metrage_price']) }}"
                                       id="basic-icon-default-fullname" placeholder="قیمت هر متر" aria-label="تعداد"
                                       aria-describedby="basic-icon-default-fullname2">
                            </td>
                            <td class="text-center price-cell" datatype="{{ ($row['price'] < 1 ? 'false' : 'true' ) }}"> {{ number_format($row['price']) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="row justify-content-end">
{{--                <div class="col-sm-10">--}}
                    <button type="submit" class="btn btn-primary">به روز رسانی اقلام فاکتور</button>
{{--                </div>--}}
            </div>
        </form>
        </div>
    </div>












{{--        @foreach($invoice['products'] as $row)--}}
{{--            <hr class="mb-5">--}}
{{--            <form method="post" enctype="multipart/form-data"--}}
{{--                  action="{{ route('dashboard.invoices.update.cart', ['invoice' => $invoice['id'], 'cart' => $row['id']]) }}">--}}
{{--                @csrf--}}
{{--                <div class="row mb-3">--}}
{{--                    <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">نام</label>--}}
{{--                    <div class="col-sm-10">--}}
{{--                        <div class="input-group input-group-merge">--}}
{{--                            <span id="basic-icon-default-fullname2" class="input-group-text"><i class="bx bx-file"></i></span>--}}
{{--                            <input  type="text" class="form-control" name="name"--}}
{{--                                   value="{{ ($row['code']['stock']['name'] ?? '...') . ' - ' . ($row['code']['name'] ?? '...') }}" disabled id="basic-icon-default-fullname"--}}
{{--                                   placeholder="Title" aria-label="نام" aria-describedby="basic-icon-default-fullname2">--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="row mb-3">--}}
{{--                    <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname"> تعداد </label>--}}
{{--                    <div class="col-sm-10">--}}
{{--                        <div class="input-group input-group-merge">--}}
{{--                            <span id="basic-icon-default-fullname2" class="input-group-text"><i class="bx bx-money"></i></span>--}}
{{--                            <input required type="number" class="form-control" name="count"--}}
{{--                                   value="{{ ($row['count'] ?? 0) }}" id="basic-icon-default-fullname"--}}
{{--                                   placeholder="تعداد" aria-label="نام" aria-describedby="basic-icon-default-fullname2">--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="row mb-3">--}}
{{--                    <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname"> متراژ </label>--}}
{{--                    <div class="col-sm-10">--}}
{{--                        <div class="input-group input-group-merge">--}}
{{--                            <span id="basic-icon-default-fullname2" class="input-group-text"><i class="bx bx-money"></i></span>--}}
{{--                            <input required type="text" class="form-control" name="meterage"--}}
{{--                                   value="{{ ($row['meterage'] ?? '') }}" id="basic-icon-default-fullname"--}}
{{--                                   placeholder="متراژ را وارد کنید" aria-label="نام" aria-describedby="basic-icon-default-fullname2">--}}
{{--                        </div>--}}
{{--                    <small class="text-primary"> درصورت تنوع متری محصول حتما عدد یک را وارد کنید. </small>--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="row mb-3">--}}
{{--                    <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname"> قیمت هر متر </label>--}}
{{--                    <div class="col-sm-10">--}}
{{--                        <div class="input-group input-group-merge">--}}
{{--                            <span id="basic-icon-default-fullname2" class="input-group-text"><i class="bx bx-money"></i></span>--}}
{{--                            <input required type="text" class="form-control h-number" name="metrage_price"--}}
{{--                                   value="{{ ($row['metrage_price'] ?? 0) }}" id="basic-icon-default-fullname"--}}
{{--                                   placeholder="Title" aria-label="نام" aria-describedby="basic-icon-default-fullname2">--}}
{{--                        </div>--}}
{{--                    <small class="text-primary"> قیمت هر متر را وارد کنید. مجموع قیمت خودکار محاسبه خواهد شد! </small>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="row mb-3">--}}
{{--                    <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname"> مجموع قیمت </label>--}}
{{--                    <div class="col-sm-10">--}}
{{--                        <div class="input-group input-group-merge">--}}
{{--                            <span id="basic-icon-default-fullname2" class="input-group-text"><i class="bx bx-money"></i></span>--}}
{{--                            <input required type="text" class="form-control h-number" disabled--}}
{{--                                   value="{{ ($row['price'] ?? 0) }}" id="basic-icon-default-fullname"--}}
{{--                                   placeholder="Title" aria-label="نام" aria-describedby="basic-icon-default-fullname2">--}}
{{--                        </div>--}}
{{--                    <small class="text-primary"> قیمت کل این آیتم را وارد فرمایید. </small>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="row justify-content-end">--}}
{{--                    <div class="col-sm-10">--}}
{{--                        <button type="submit" class="btn btn-primary">ارسال</button>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="row mt-4 justify-content-end">--}}
{{--                    <a href="{{route('dashboard.invoices.destroy.cart', ['invoice' => $invoice['id'], 'cart' => $row['id']])}}" class="col-sm-10">--}}
{{--                        <button type="button" class="btn btn-danger">حذف</button>--}}
{{--                    </a>--}}
{{--                </div>--}}
{{--            </form>--}}

{{--            --}}{{--                    <tr>--}}
{{--            --}}{{--                        <td><i class="fab fa-angular fa-lg text-danger me-3"></i> <strong>{{ $row['id'] }}</strong></td>--}}
{{--            --}}{{--                        <td>{{ $row['code']['name'] }}</td>--}}
{{--            --}}{{--                        <td>{{ $row['count'] ?? '-' }}</td>--}}
{{--            --}}{{--                        <td>{{ $row['price'] ?? '-' }}</td>--}}
{{--            --}}{{--                        <td>{{ $row['created_at'] ?? '-' }}</td>--}}
{{--            --}}{{--                        <td>--}}
{{--            --}}{{--                            <div class="dropdown disabled">--}}
{{--            --}}{{--                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>--}}
{{--            --}}{{--                                <div class="dropdown-menu">--}}
{{--            --}}{{--                                    <a class="dropdown-item" href="./requests/{{ $row['id'] }}"><i class="bx bxs-show me-1"></i> show</a>--}}
{{--            --}}{{--                                    <a class="dropdown-item" href="{{ route('dashboard.invoices.delete.cart', ['invoice' => $invoice['id'], 'cart' => $row['id']]) }}"><i class="bx bx-trash me-1"></i> حذف</a>--}}
{{--            --}}{{--                                </div>--}}
{{--            --}}{{--                            </div>--}}
{{--            --}}{{--                        </td>--}}
{{--            --}}{{--                    </tr>--}}
{{--        @endforeach--}}

@endsection