@extends('vendor.header.header')
@section('content')
    <div class="header bg-primary pb-6  pt-5">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <h6 class="h2 text-white d-inline-block mb-0">{{ __('Items') }}</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/">{{ __('Dashboard') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ __('items table') }}</li>
                            </ol>
                        </nav>
                    </div><br>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <a href="{{ route('vendor.item.create', ['category_id' => $category_id]) }}" class="btn btn-sm btn-neutral">{{ __('Create New Items') }}+</a><br><br>
            </div>
        </div>
        <div class="card">

            <div class="col-lg-12">

                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        @if (isset($branche_id) && !empty($branche_id))
                            <form method="POST" action="{{ route('vendor.addCategory.store') }}" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="storeId" value="{{ $branche_id }}">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-username">{{ __('English Main Category Name') }} </label>
                                            <input type="text" name="CategoryName" required class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-username">{{ __('Arabic Main Category Name') }}</label>
                                            <input type="text" name="CategoryNamear" required class="form-control">
                                        </div>
                                    </div>
                                </div>

                            </form>
                        @endif

                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-items-center">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" class="sort" data-sort="image">{{ __('Item Image') }}</th>
                                <th scope="col" class="sort" data-sort="name">{{ __('item name') }}</th>
                                <th scope="col" class="sort" data-sort="price">{{ __('Price') }}</th>
                                <th scope="col" class="sort" data-sort="status">{{ __('Status') }}</th>
                                <th scope="col" class="sort" data-sort="rate">{{ __('Rate') }}</th>
                                <th scope="col" class="sort" data-sort="description">{{ __('Description') }}</th>
                                <th scope="col" class="sort" data-sort="addons">{{ __('add-ons') }}</th>
                                <th scope="col" class="sort" data-sort="action">{{ __('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody class="list" id="myTable">
                            @foreach ($items as $item)
                                <tr>
                                    <td><img src="{{ $item->item_image }}" class="img-fluid rounded" style="width: 75px;" alt="{{ $item->lang->translate_title_ar }}"></td>
                                    <td>{{ $item->lang->translate_title_ar }}</td>
                                    <td>{{ $item->price }}</td>
                                    <td>
                                        <span class="badge badge-dot">
                                            @if ($item->status == 0)
                                                <i class="bg-warning"></i> {{ __('Inactive') }}
                                            @elseif($item->status == 1)
                                                <i class="bg-success"></i> {{ __('Active') }}
                                            @endif
                                        </span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="completion mr-2">{{ $item['Rate'] }}</span>
                                            <div class="progress">
                                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ $item->Rate }}" aria-valuemin="0" aria-valuemax="5" style="width: {{ $item->Rate * 20 }}%;"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-truncate" style="max-width: 150px;" data-toggle="tooltip" data-placement="top" title="{{ $item->Description }}">
                                        {{ Str::limit($item->Description, 50) }}
                                    </td>
                                    <td>
                                        <a href="{{ route('vendor.items.add_ons', $item['id']) }}" class="btn btn-primary btn-sm">{{ __('add-ons') }}</a>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <form method="GET" action="{{ route('vendor.item.edit', $item->id) }}" class="mr-2">
                                                <button class="btn btn-outline-primary btn-sm" id="updateCat">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </button>
                                            </form>
                                            <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#itemModal{{ $item->id }}">
                                                <i class="fas fa-eye fa-lg"></i>
                                            </button>
                                            <form action="{{ route('vendor.item.destroy', $item->id) }}" method="post" id="delete{{ $item->id }}" style="display: none" data-swal-title="{{ __('Delete Items') }}" data-swal-text="{{ __('Are You Sure To Delete This Item?') }}" data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}" data-success-msg="{{ __('The item has been deleted successfully') }}">
                                                @csrf
                                                @method('delete')
                                            </form>
                                            <button type="button" class="btn btn-outline-danger btn-sm ml-2 form-confirm" data-form-id="#delete{{ $item->id }}">
                                                <i class="far fa-trash-alt"></i>
                                            </button>
                                        </div>


                                        <!-- Modal -->
                                        <div class="modal fade" id="itemModal{{ $item->id }}" tabindex="-1" aria-labelledby="itemModalLabel{{ $item->id }}" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="itemModalLabel{{ $item->id }}">{{ __('Item Description') }}</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="mb-3">
                                                            <img src="{{ $item->item_image }}" class="img-fluid" alt="{{ $item->lang->translate_title_ar }}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{ __('Item Name') }}:</label>
                                                            <span class="bold">{{ $item->lang->translate_title_ar }}</span>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{ __('Item Price') }}:</label>
                                                            <span class="bold">{{ $item->price }}</span>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{ __('Description') }}:</label>
                                                            <textarea wrap="virtual" class="form-control" rows="5" readonly>{{ $item->Description }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection