@extends('layouts/contentNavbarLayout')

@section('title', 'کد ها')

@section('page-style')
    <link rel="stylesheet" href="{{ asset('assets/css/dragAndDrop.css') }}">
@endsection

@section('vendor-script')
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/dragAndDrop.js') }}"></script>
    <script>
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function addNewRow() {
            const tableBody = document.getElementById('product-table-body');
            const newRow = document.createElement('tr');
            const randomNumber = getRandomNumber(9999999999, 999999999999);
            newRow.innerHTML = `
        <td>#</td>
        <td class="text-center">
            <input type="number" class="text-center form-control" name="invoice_product[${randomNumber}][count]" value="" placeholder="تعداد را وارد کنید" aria-label="تعداد">
        </td>
        <td class="text-center">
            <input type="text" class="text-center form-control meterage-input" name="invoice_product[${randomNumber}][meterage]" value="" placeholder="متراژ را وارد کنید" aria-label="تعداد">
        </td>
        <td class="text-center">
            <input type="text" class="text-center h-number form-control metrage-price-input" name="invoice_product[${randomNumber}][metrage_price]" value="" placeholder="خودکار محاسبه شود" aria-label="تعداد">
        </td>
    `;

            tableBody.appendChild(newRow);
        }
    </script>
@endsection

@section('content')

    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">موجودی ها /  لیست /</span>ویرایش {{ $code->name }}
    </h4>
    <div class="row">
        <!-- Basic with Icons -->
        <div class="col-xxl">
            <div class="card mb-4">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">ایجاد کد جدید</h5> <small class="text-muted float-end">اطلاعات را به درستی وارد کنید.</small>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" action="{{ route('dashboard.stocks.codes.update', compact('code')) }}">
                        @csrf
                        @include('components.errors')
                        <input type="text" name="stock_id" hidden value="{{ $code }}">
                        <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 required type="text" class="form-control" name="name" value="{{$code->name}}" 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-box"></i></span>
                                    <input required type="number" min="0" class="form-control" name="count" value="{{$code->count}}" 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  type="text" min="0" class="form-control h-number" name="price" value="{{$code->price}}" id="basic-icon-default-fullname" placeholder="قیمت (اختیاری)" aria-label="نام" aria-describedby="basic-icon-default-fullname2">
                                </div>
                                <small>{{ $code->price ? number_format($code->price) : '0' }}</small>
                            </div>
                        </div>

                        <div class="col-12 px-md-5">
                            <div class="header-section text-center">
                                <h1>گالری تصاویر</h1>
                                <p>تمامی تصویرها به ترتیب زیر نمایش داده خواهند شد.</p>
                                <p>تصاویر با فرمت mp4 / webm / png / jpeg / jpg را به اینجا بکشید یا انتخاب کنید.</p>
                            </div>
                            <div class="drop-section mx-0">
                                <div class="col mt-5 text-center">
                                    <span>فایل خود را به اینجا بکشید</span>
                                    <span>یا</span>
                                    <button type="button" class="file-selector">انتخاب کنید</button>
                                    <input type="file" accept=".png, .jpeg, .jpg, .webp" class="file-selector-input" multiple>
                                </div>
                                <div class="col col-12" style="width: 17rem;">
                                    <div class="drop-here">به اینجا بکشید</div>
                                </div>
                            </div>
                            <div class="list-section m-md-5" style="display: block;">
                                <div class="list-title">فایل‌های آپلود شده:</div>
                                <div class="list">
                                    @foreach($code->images ?? [] as $image)
                                        <li class="flex-wrap complete py-3 px-1" data="file-73">
                                            <div class="col d-flex justify-content-center">
                                                <button type="button" class="btn delete-btn text-danger" onclick="LiveFileDelete(this, {{ $image->id }})"> حذف</button>
                                            </div>
                                            <div class="col">
                                                <div class="file-name">
                                                    <div class="name">{{ basename($image->file_path) }}</div>
                                                    <span>100%</span>
                                                </div>
                                                <div class="file-progress">
                                                    <span style="width: 100%;"></span>
                                                </div>
                                            </div>
                                            <div class="col uploaded-image"><a target="_blank" href="{{ asset($image->file_path) }}"><img style="width: 7rem" src="{{ asset($image->file_path) }}"></a></div>
                                            <div class="col">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="cross" height="20" width="20">
                                                    <path d="m5.979 14.917-.854-.896 4-4.021-4-4.062.854-.896 4.042 4.062 4-4.062.854.896-4 4.062 4 4.021-.854.896-4-4.063Z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="tick" height="20" width="20">
                                                    <path d="m8.229 14.438-3.896-3.917 1.438-1.438 2.458 2.459 6-6L15.667 7Z"></path>
                                                </svg>
                                            </div>
                                        </li>
                                        <hr>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <h3 class="d-inline">تنوع محصول</h3>
                            <div class="col-md-12 overflow-auto">
                                <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>
                                    </tr>
                                    </thead>
                                    <tbody id="product-table-body">
                                    @foreach($code->types as $index => $row)
                                        <tr>
                                            <td>{{ $index + 1 }}</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->metrage) }}"
                                                       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->price) }}"
                                                       id="basic-icon-default-fullname" placeholder="خودکار محاسبه شود" aria-label="تعداد"
                                                       aria-describedby="basic-icon-default-fullname2">
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                <button class="btn btn-primary my-2" type="button" onclick="addNewRow()"> + افزودن ردیف جدید</button>
                            </div>
                        </div>
                        <div class="row justify-content-end">
                            <div class="col-sm-10">
                                <button type="submit" class="btn btn-primary">ارسال</button>
                            </div>
                        </div>
                        <div id="files"></div>
                    </form>

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

@endsection