@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
    <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: 99999;
            /*   margin-left:260px; */
        }

        .spinner-layer {
            position: fixed;
            width: calc(100vw - 260px);
            height: calc(100vh - 70px);
            background: #f2edf3;
            z-index: 999;
            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-apps menu-icon"></i>
                </span> {{ __('messages.Manage Inventories') }}
            </h3>
        </div>
        <div class="container  p-0 ">
            <form id="destroy_form" class=" bg-white rounded rounded-lg p-3 mb-4">
                <div class="row m-0">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>{{__("messages.Item Name")}}</label>
                            <select name="item_id" id="item_id" class="form-control select2">
                                <option value="">{{__("messages.Select Item")}}</option>
                                @foreach($items as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>{{__("messages.Inventory Name")}}</label>
                            <select name="inventory_id" id="inventory_id" class="form-control select2">
                                <option value="">{{__("messages.Select Item")}}</option>
                                @foreach($inventories as $key=>$inventory)
                                    <option value="{{$key}}">{{$inventory}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 p-0 d-none" id="expire_date">
                        <div class="row m-0">
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label>{{__("messages.Expire Date")}}</label>
                                    <select name="expire_date_list" class="form-control select2" id="expire-date-list">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label>{{__("messages.Damage Inventory Name")}}</label>
                                    <select name="damage_inventory_id" id="damage_inventory_id"
                                            class="form-control select2">
                                        <option value="">{{__("messages.Select Item")}}</option>
                                        @foreach(config('app.globals.out_source_inventory_ids') as $inventory)
                                            <option value="{{$inventory}}">{{__($inventory)}}</option>
                                        @endforeach
                                        @foreach($inventories as $key=>$inventory)
                                            <option value="{{$key}}">{{$inventory}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 ">
                                <div class="form-group">
                                    <label>{{__("messages.Available Quantity / Weight")}}</label>
                                    <input disabled type="number" class="form-control" id="available_quantity">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>{{__("messages.Damaged Quantity / Weight")}}</label>
                                    <input type="number" class="form-control" id="quantity">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>{{__("messages.Remaining Quantity / Weight")}}</label>
                                    <input type="number" disabled class="form-control" id="remaining_quantity">
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="text-center">
                        <button class="btn customBackGroundColore">{{__("messages.Transport")}}</button>
                    </div>
                </div>
            </form>
            <form id="destroy-items" class=" bg-white p-3 rounded rounded-lg" action="{{route('make-damaged-items')}}"
                  method="POST">
                @csrf
                <div class="table-responsive mt-5">
                    <div class="form-group">
                        <label>{{__("messages.To Expense")}}</label>
                        <select class="select2" name="account_id">
                            <option>{{__("messages.Select Item")}}</option>
                            @foreach($accounts as $account)
                                <option value="{{$account->id}}">{{$account->name}}</option>
                            @endforeach

                        </select>
                    </div>
                    <div id="error-list" class="error alert alert-danger p-3 d-none"></div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>{{__("messages.Item Name")}}</th>
                            <th>{{__("messages.Source Inventory")}}</th>
                            <th>{{__("messages.Destination Inventory Damage")}}</th>
                            <th>{{__("messages.Quantity / Weight")}}</th>
                            <th>{{__("messages.Expire Date")}}</th>
                            <th>{{__("messages.Action")}}</th>
                        </tr>

                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

                <div class="text-center mt-4">
                    <button class="btn btn-danger">{{__("messages.Transport Items")}}</button>
                </div>
            </form>
        </div>
    </div>
    <div class="spinner-layer d-none">
        <div class="spinner"></div>
        <p class="fs-3">جاري تنفيذ الطلب</p>
    </div>
@endsection

@section('scripts')
    <script>
        var translation = {
            'Select Expire Data': '{{__("messages.Select Expire Data")}}',
            'This Field Is Required': '{{__("messages.This Field Is Required")}}',
            'Please Select Different Inventory': '{{__("messages.Please Select Different Inventory")}}',
        };
    </script>
    <script src="{{asset('metronic/js/pages/damaged-items.js?v=').config('app.version')}}"></script>

@endsection