@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">

    <style>
        .select2-container--open {
            z-index: 9999999 !important;
        }

        .datatable td:last-child {
            white-space: nowrap;
            display: flex !important;
        }
    </style>
    <style>

        /* Spinner styles */
        .spinner {

            width: 5em;
            height: 5em;
            border: 0.5em solid rgba(0, 0, 0, 0.1);
            border-left-color: #8daf21;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 99999999999999999999999999999999999999999999999;
            /*   margin-left:260px; */
        }

        .spinner-layer {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            width: 100vw!important;
            height:100vh!important;
            background: #f2edf3;
            z-index: 99999999999999999999999999999999999999999999999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        /* Spinner animation */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

    </style>
@endsection

@section('main-content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span>
                @if(request()->type == 'pending')
                    {{ __('Pending Invoices Without Price') }}
                @else
                    {{ __('Invoices Without Price') }}
                @endif
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>
            @permission('purchasing-orders-create')
            <div class="buttons-container">
                <a class="btn btn-primary float-end "
                   href="{{ route('invoice-without-price.create') }}">{{ __('Add invoice Without price') }}</a>
            </div>
            @endpermission


            <div class="table-responsive customscroll">
                <div class="container pb-2">
                    <div class="row ">
                        <div class="col-12 col-md-4">
                            <label class="col-form-label">{{ __('messages.date:') }}</label>
                            <div class="center-custom-width-filter-date">
                                <input type="date" id="date_from" name="date_from" class="form-control"/>
                            </div>
                        </div>

                        <div class="col-12  col-md-4">
                            <label class="col-form-label">{{ __('Date To') }}</label>
                            <div class="center-custom-width-filter-date">
                                <input type="date" id="date_to" name="date_to" class="form-control"/>
                            </div>
                        </div>

                        <div class="col-12 col-md-4 customselectcss">
                            <div class="form-group mb-3 px-2">
                                <label class="col-form-label">{{ __('messages.Suppliers') }}:</label>
                                <select id="supplierSelect" class="select2 form-control">
                                    <option value="0">
                                        {{ __('validation.Select', ['attribute' => __('messages.Suppliers')]) }}
                                    </option>
                                    @foreach ($suppliersFilter as $supplier)
                                        <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-12 col-md-4 customselectcss">
                            <div class="form-group mb-3 px-2">
                                <label class="col-form-label">{{ __('messages.Shipping type') }}:</label>
                                <select id="ShippingSelect" class="select2 form-control">
                                    <option value="0">
                                        {{ __('validation.Select', ['attribute' => __('messages.Shipping type')]) }}
                                    </option>
                                    <option value="land">{{ __('messages.land') }}</option>
                                    <option value="air">{{ __('messages.air') }}</option>
                                    <option value="sea">{{ __('messages.sea') }}</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-12 col-md-4 customselectcss">
                            <div class="form-group mb-3 px-2">
                                <label class="col-form-label">{{ __('messages.Item') }}:</label>
                                <select id="ItemSelect" class="select2 form-control">
                                    <option value="0">
                                        {{ __('validation.Select', ['attribute' => __('messages.Item')]) }}</option>
                                    @foreach ($itemNames as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table datatable text-center" id="table">
                    <thead>
                    <tr>
                        <th>{{ __('messages.ID') }}</th>
                        <th>{{ __('messages.Serial number') }}</th>
                        <th>{{ __('messages.Status') }}</th>
                        <th>{{ __('messages.Owner status') }}</th>
                        <th>{{ __('messages.Shipping type') }}</th>
                        <th>{{ __('messages.Date') }}</th>
                        <th>{{ __('messages.User Name') }}</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    {{-- show Modal --}}
    <div class="modal fade" id="show-modal" tabindex="-1" aria-labelledby="showModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <h5 class="modal-title" id="showModalLabel">{{ __('messages.Purchase data') }} </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>
                <div class="modal-body row">

                    <ul id="show_user_msgList"></ul>
                    <input type="hidden" id="id"/>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mx-auto">
                                <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab"
                                    role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                           href="#pills-show-user-data" role="tab" aria-controls="pills-home"
                                           aria-selected="true">{{ __('messages.Purchase data') }}</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                                           href="#pills-show-items" role="tab" aria-controls="pills-contact"
                                           aria-selected="false"> {{ __('messages.Items') }} </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                                           href="#pills-show-user-file" role="tab" aria-controls="pills-contact"
                                           aria-selected="false"> {{ __('messages.Purchase files') }} </a>
                                    </li>
                                </ul>
                                <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-show-user-data" role="tabpanel"
                                         aria-labelledby="pills-home-tab">
                                        <fieldset disabled>
                                            <div class="row">
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for=""> {{ __('messages.Serial number') }}</label>
                                                    <input type="text" id="show-serial-number" required
                                                           class=" form-control">
                                                </div>
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for="">{{ __('messages.Status') }}</label>
                                                    <input type="text" id="show-status" required class=" form-control">
                                                </div>
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for="">{{ __('messages.Shipping type') }}</label>
                                                    <input type="text" id="show-shipping-type" required
                                                           class=" form-control">
                                                </div>

                                                <div class="form-group mb-3 col-md-6">
                                                    <label for="">{{ __('messages.Date') }}</label>
                                                    <input type="text" id="show-created-at" required
                                                           class=" form-control">
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="tab-pane fade" id="pills-show-items" role="tabpanel"
                                         aria-labelledby="pills-contact-tab">
                                        <h4 class="card-title">{{ __('messages.Items') }}</h4>
                                        <div class="custoTable" style="overflow: hidden;">
                                            <div class="table_responsive">
                                                <table id="show-myTableItems">
                                                    <thead>
                                                    <tr>
                                                        <th>{{ __('messages.Item') }}</th>
                                                        <th>{{ __('messages.Suppliers') }}</th>
                                                        <th>{{ __('messages.Inventory') }}</th>
                                                        <th>{{ __('messages.quantity') }}</th>
                                                        <th>{{ __('messages.meat weight') }}</th>
                                                        <th>{{ __('messages.production date') }}</th>
                                                        <th>{{ __('messages.expire date') }}</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-show-user-file" role="tabpanel"
                                         aria-labelledby="pills-contact-tab">
                                        <div class="custoTable">
                                            <div class="table_responsive">
                                                <table id="show-myTableFile">
                                                    <thead>
                                                    <tr>
                                                        <th>{{ __('messages.ID') }}</th>
                                                        <th>{{ __('messages.Files') }}</th>
                                                        <th>{{ __('messages.Action') }}</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Edn- show Modal --}}

    {{-- edit Modal --}}
    <div class="modal fade" id="edit-modal" aria-labelledby="editModalLabel" aria-hidden="true">
        <form id="update-form" method="POST" action="{{route("invoice-without-price.update")}}">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">{{ __('messages.Update Purchase Data') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body row">

                        <ul id="update_msgList"></ul>
                        <input type="hidden" id="id"/>
                        <input type="hidden" id="edit-ajax-route" value="{{ route('invoice-without-price.edit') }}"/>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mx-auto">
                                    <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab"
                                        role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="pills-purchase-tab" data-bs-toggle="pill"
                                               href="#pills-purchase" role="tab" aria-controls="pills-home"
                                               aria-selected="true">{{ __('messages.Purchase data') }}</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="pills-items-tab" data-bs-toggle="pill"
                                               href="#pills-items" role="tab" aria-controls="pills-contact"
                                               aria-selected="false"> {{ __('messages.Items') }} </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="pills-Files-tab" data-bs-toggle="pill"
                                               href="#pills-Files" role="tab" aria-controls="pills-Files"
                                               aria-selected="false">{{ __('messages.Purchase files') }}</a>
                                        </li>
                                        <li class="nav-item my-3">
                                            <a class="nav-link" id="pills-add-Files-tab" data-bs-toggle="pill"
                                               href="#pills-add-Files" role="tab" aria-controls="pills-Files"
                                               aria-selected="false">{{ __('messages.Add purchase files') }}</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                        <div class="tab-pane fade show active" id="pills-purchase" role="tabpanel"
                                             aria-labelledby="pills-purchase">
                                            <div class="row">
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for=""> {{ __('messages.Serial number') }}</label>
                                                    <input type="text" id="edit-serial-number" required
                                                           name="serial_number"
                                                           class=" form-control">
                                                </div>
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for="">{{ __('messages.Shipping type') }}</label>
                                                    <select name="shipping_type" id="edit-shipping-type"
                                                            class="form-control">
                                                        <option value="0">
                                                            {{ __('validation.Select', ['attribute' => __('messages.shipping')]) }}
                                                        </option>
                                                        <option value="land">{{ __('messages.land') }}</option>
                                                        <option value="air">{{ __('messages.air') }}</option>
                                                        <option value="sea">{{ __('messages.sea') }}</option>
                                                    </select>
                                                </div>
                                                @permission('purchasing-orders-approve')
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for="">{{ __('messages.Owner Status') }}</label>
                                                    <select name="owner_status" id="edit-owner-status"
                                                            class="form-control">
                                                        <option value="0">
                                                            {{ __('validation.Select', ['attribute' => __('Owner Status')]) }}
                                                        </option>
                                                        <option value="pending">{{ __('Pending') }}</option>
                                                        <option value="approve">{{ __('messages.Approve') }}</option>
                                                    </select>
                                                </div>
                                                @endpermission
                                                <div class="form-group mb-3 col-md-6">
                                                    <label for="">{{ __('messages.Date') }}</label>
                                                    <input type="text" readonly id="edit-created-at" required
                                                           class=" form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="pills-items" role="tabpanel"
                                             aria-labelledby="pills-items">
                                            <h4 class="card-title">{{ __('messages.Items') }}</h4>

                                            <div id="check-if-aprove-and-estimated_cost" class="row p-3"
                                                 style="background: #fff;">
                                                <div class="form-group mb-3 col-md-4">
                                                    <label for=""> {{ __('messages.Item') }}</label>
                                                    <select id="item" class="form-control select2-item">
                                                        <option value="0">
                                                            {{ __('validation.Select', ['attribute' => __('messages.Item')]) }}
                                                        </option>
                                                        @foreach($items as $item)
                                                            <option value="{{$item->id}}"
                                                                    data-item-is-carton="{{$item->is_meat_in_carton}}"
                                                                    data-is-meet="{{($item->id == config('app.globals.meat_carton_item_id') || $item->category_id == config('app.globals.meat_category_id') || $item->category_id ==config('app.globals.meat_carton_category_id')) ? 1:0}}"
                                                                    data-item-category-id="{{$item->category_id}}">{{$item->name}}</option>
                                                        @endforeach
                                                    </select>

                                                    <div class="itemId-error d-none text-danger">
                                                        {{ __('validation.required', ['attribute' => __('messages.Item')]) }}
                                                    </div>
                                                </div>
                                                <div class="form-group mb-3 col-md-4">
                                                    <label for=""> {{ __('messages.Supplier') }}</label>
                                                    <select id="supplier" class="select2-item  form-control">
                                                        <option value="0">
                                                            {{ __('validation.Select', ['attribute' => __('messages.Supplier')]) }}
                                                        </option>
                                                        @foreach ($suppliersFilter as $supplier)
                                                            <option value="{{ $supplier->id }}">{{ $supplier->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="supplierId-error d-none text-danger">
                                                        {{ __('validation.required', ['attribute' => __('messages.Suppliers')]) }}
                                                    </div>
                                                </div>
                                                <div class="form-group mb-3 col-md-4">
                                                    <label for=""> {{ __('messages.Inventory') }}</label>
                                                    <select id="inventoryItem" class="form-control select2-item">
                                                        <option value="0">
                                                            {{ __('validation.Select', ['attribute' => __('messages.Inventory')]) }}
                                                        </option>
                                                        @foreach ($inventories as $inventory)
                                                            <option value="{{ $inventory->id }}">{{ $inventory->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="inventoryId-error d-none text-danger">
                                                        {{ __('validation.required', ['attribute' => __('messages.Inventory')]) }}
                                                    </div>
                                                </div>
                                                <div class="form-group mt-3 col-md-4 quantity-div">
                                                    <label for="">{{ __('messages.quantity') }}</label>
                                                    <input id="quantity" type="text" required class="form-control"
                                                           value="0"
                                                    >
                                                    <div class="quantity-error d-none text-danger">
                                                        {{ __('validation.required', ['attribute' => __('messages.quantity')]) }}
                                                    </div>
                                                </div>

                                                <div class="form-group mt-3 col-md-4">
                                                    <label>{{ __('messages.production date') }}</label>
                                                    <input id="production_date" class="form-control" type="date">
                                                    <div class="production_date-error d-none text-danger">
                                                        {{ __('validation.required', ['attribute' => __('messages.production date')]) }}
                                                    </div>
                                                </div>
                                                <div class="form-group mt-3 col-md-4">
                                                    <label>{{ __('messages.expire date') }}</label>
                                                    <input id="expire_date" class="form-control" type="date">
                                                    <div class="expire_date-error d-none text-danger">
                                                        {{ __('validation.required', ['attribute' => __('messages.expire date')]) }}
                                                    </div>
                                                </div>

                                                <div class="m-2">
                                                    <button id="confirmItem" type="button"
                                                            class="btn btn-primary">{{ __('messages.Confirm item') }}</button>
                                                </div>
                                            </div>

                                            <div class="custoTable" style="overflow: hidden;">
                                                <input type="hidden" name="item">
                                                <div class="table_responsive">
                                                    <table id="edit-myTableItems">
                                                        <thead>
                                                        <tr>
                                                            <th>{{ __('messages.Item') }}</th>
                                                            <th>{{ __('messages.Suppliers') }}</th>
                                                            <th>{{ __('messages.Inventory') }}</th>
                                                            <th>{{ __('messages.Quantity / Weight') }}</th>
                                                            <th>{{ __('messages.production date') }}</th>
                                                            <th>{{ __('messages.expire date') }}</th>
                                                            <th>{{ __('messages.Action') }}</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="pills-Files" role="tabpanel"
                                             aria-labelledby="pills-Files">
                                            <input type="hidden" id="delete-image-route"
                                                   value="{{ route('invoice-without-price.delete-file') }}"/>
                                            <div class="custoTable">
                                                <div class="table_responsive">
                                                    <table id="edit-myTableFile">
                                                        <thead>
                                                        <tr>
                                                            <th>{{ __('messages.ID') }}</th>
                                                            <th>{{ __('messages.Files') }}</th>
                                                            <th>{{ __('messages.Action') }}</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="pills-add-Files" role="tabpanel"
                                             aria-labelledby="pills-add-Files">
                                            <div class="containerDragDop">
                                                <div class="header-section">
                                                    <h1>{{ __('messages.upload files') }}</h1>
                                                    <p>{{ __('messages.Upload files you want to share with your team members') }}
                                                    </p>
                                                    <p>{{ __('messages.PDF, Images & Videos are allowed') }}</p>
                                                    <p class="files-error d-none text-danger">
                                                        {{ __('messages.too_many_files') }}</p>
                                                </div>
                                                <div class="drop-section-customcss drop-section-edit">
                                                    <div class="col">
                                                        <div class="cloud-icon">
                                                            <img src="/metronic/images/iconsDragAndDrop/cloud.png"
                                                                 alt="cloud">
                                                        </div>
                                                        <span>{{ __('messages.Drag & Drop your files here') }}</span>
                                                        <span>{{ __('messages.OR') }}</span>
                                                        <button type="button"
                                                                class="file-selector-edit">{{ __('messages.Browse Files') }}</button>
                                                        <input name="files" type="file" id="FileList"
                                                               class="file-selector-input-edit" multiple>
                                                    </div>
                                                    <div class="col">
                                                        <div class="drop-here">{{ __('messages.Drop Here') }}</div>
                                                    </div>
                                                </div>
                                                <div class="list-section-customcss list-section-edit">
                                                    <div class="list-title">{{ __('messages.Uploaded Files') }}</div>
                                                    <div class="list-edit" id="FileList"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                                            <button type="submit"
                                                    class="btn btn-primary update">{{ __('messages.Update') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <input type="hidden" id="MEATCARTONCATEGORYID" value="{{config('app.globals.meat_carton_category_id')}}"/>
    <input type="hidden" id="MEATCARTONCATEGORYID" value="{{config('app.globals.meat_carton_category_id')}}"/>
    <input type="hidden" id="update-form-item-id" value=""/>
    {{-- Edn- Edit Modal --}}
    <div class="spinner-layer d-none ">
        <div class="spinner"></div>
        <p class="fs-3">{{__('messages.Processing')}}</p>
    </div>
@endsection

@section('scripts')
    <script>
        var translations = {
            'ID': '{{ __('messages.ID') }}',
            'Serial number': '{{ __('messages.Serial number') }}',
            'weight': '{{ __('messages.Weight') }}',
            'Status': '{{ __('messages.Status') }}',
            'Owner status': '{{ __('messages.Owner status') }}',
            'Shipping type': '{{ __('messages.Shipping type') }}',
            'Total price': '{{ __('messages.Total price') }}',
            'Tax expenses': '{{ __('messages.Tax expenses') }}',
            'Shipping price': '{{ __('messages.Shipping price') }}',
            'Date': '{{ __('messages.Date') }}',
            'Purchasing System': '{{ __('messages.Purchasing System') }}',
            'User Name': '{{ __('messages.User Name') }}',
            'return_weight': "{{ __('messages.Return Weight') }}",
            'main_weight': "{{ __('messages.Main Weight') }}",
            'returned_successfully': "{{ __('messages.returned_successfully') }}",
            'error-related': "{{ __('messages.The quantity of meat options should be equivalent to quantity of cartoon meat') }}",
            'Reset': "{{ __('messages.Reset') }}",
            'Print': "{{ __('messages.Print') }}"
        };
        const MEATCARTONCATEGORYID = $("#MEATCARTONCATEGORYID").val();
    </script>

    <script src="{{ asset('metronic/js/components/uploadFiles.js') }}"></script>
    <script src="{{ asset('metronic/js/pages/invoice-without-price.js') }}"></script>
@endsection