@extends('backend.layout.master')

@section('title')
    All Items
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mt-2">
                @session('status')
                    <div class="alert alert-{{ session('bg') }} fade show alert-dismissible" role="alert">
                        {{ session('status') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endsession
            </div>
            <div class="col-md-12">
                <div class="card mt-3">
                    <div class="card-top mx-3 my-2 d-flex align-items-center justify-content-between">
                        <h4 class="font-bold">All Items</h4>
                        <button type="button" class="btn btn-primary ms-auto d-block" data-toggle="modal"
                            data-target="#addModal">
                            Add Item
                        </button>
                    </div>
                    <div class="card-body pt-0">
                        <table class="table table-striped table-hover table-bordered text-center table-dark">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">Id</th>
                                    <th>Product Name</th>
                                    <th>Category</th>
                                    <th>Old Price</th>
                                    <th>Currnt Price</th>
                                    <th>Stock</th>
                                    <th>Image</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($items as $item)
                                    <tr>
                                        <td> {{ $item->id }} </td>
                                        <td> {{ $item->name }} </td>
                                        <td> {{ $item->category->name }} </td>
                                        <td> {{ $item->old_price }} </td>
                                        <td> {{ $item->current_price }} </td>
                                        <td> {{ $item->stock }} </td>
                                        <td>
                                            <img src="{{ URL::asset('storage/' . $item->image) }}" alt=""
                                                height="40px" width="40px">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-success editBtn" data-toggle="modal"
                                                data-target="#editModal" data-id="{{ $item->id }}"
                                                data-name="{{ $item->name }}" data-oldprice="{{ $item->old_price }}"
                                                data-category="{{ $item->category->id }}"
                                                data-currentprice="{{ $item->current_price }}"
                                                data-stock="{{ $item->stock }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <!-- Button trigger modal -->
                                            <button type="button" class="btn btn-danger deleteBtn" data-toggle="modal"
                                                data-target="#deleteModal" data-id="{{ $item->id }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="font-weight-bold">No Item Added</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- ADD MODAL BOX --}}
    <div class="modal fade" id="addModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('item.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">Add Item</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="form-group">
                            <label for="name">Item Name <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('name') }}" placeholder="Item Name"
                                class="form-control @error('name') is-invalid  @enderror" id="name" name="name">
                            @error('name')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="category">Category <span class="text-danger">*</span></label>
                            <select name="category" value="{{ old('category') }}" id="category"
                                class="form-control @error('category') is-invalid  @enderror">
                                <option disabled>Select here</option>
                                @forelse ($categories as $cat)
                                    <option value="{{ $cat->id }}"> {{ $cat->name }} </option>
                                @empty
                                    <option>Add Category</option>
                                @endforelse
                            </select>
                            @error('category')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="old_price">Old Price</label>
                            <input type="text" value="{{ old('old_price') }}" placeholder="Old price"
                                class="form-control @error('old_price') is-invalid  @enderror" id="old_price"
                                name="old_price">
                            @error('old_price')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="current_price">Current Price <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('current_price') }}" placeholder="Current Price"
                                class="form-control @error('current_price') is-invalid  @enderror" id="current_price"
                                name="current_price">
                            @error('current_price')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="time">Delivery Time <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('time') }}" placeholder="Delivery Time"
                                class="form-control @error('time') is-invalid  @enderror" id="time" name="time">
                            @error('time')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="stock">Stock/Quantity <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('stock') }}" placeholder="Stock or Quantity"
                                class="form-control @error('stock') is-invalid  @enderror" id="stock" name="stock">
                            @error('stock')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="warning">Warning</label>
                            <input type="text" value="{{ old('warning') }}" placeholder="Set warning alert"
                                class="form-control @error('warning') is-invalid  @enderror" id="warning"
                                name="warning">
                            @error('warning')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="image">Image <span class="text-danger">*</span></label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('image') is-invalid  @enderror"
                                    name="image" id="inputGroupFile02">
                                <label class="custom-file-label" for="inputGroupFile02"
                                    aria-describedby="inputGroupFileAddon02">Choose file</label>
                                @error('image')
                                    <span class="text-danger mt-1"> {{ $message }} </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Add Item</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- UPDATE MODAL BOX --}}

    <div class="modal fade" id="editModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="updateForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">Edit Item</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="form-group">
                            <label for="e_name">Item Name <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('e_name') }}" placeholder="Item Name"
                                class="form-control @error('e_name') is-invalid  @enderror" id="e_name"
                                name="e_name">
                            @error('e_name')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_category">Category <span class="text-danger">*</span></label>
                            <select name="e_category" value="{{ old('e_category') }}" id="e_category"
                                class="form-control @error('e_category') is-invalid  @enderror">
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ $cat->id }}> {{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('e_category')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_old_price">Old Price</label>
                            <input type="text" value="{{ old('e_old_price') }}" placeholder="Old price"
                                class="form-control @error('e_old_price') is-invalid  @enderror" id="e_old_price"
                                name="e_old_price">
                            @error('e_old_price')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_current_price">Current Price <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('e_current_price') }}" placeholder="Current Price"
                                class="form-control @error('e_current_price') is-invalid  @enderror" id="e_current_price"
                                name="e_current_price">
                            @error('e_current_price')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_time">Delivery Time <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('time') }}" placeholder="Delivery Time"
                                class="form-control @error('e_time') is-invalid  @enderror" id="e_time"
                                name="e_time">
                            @error('e_time')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_stock">Stock/Quantity</label>
                            <input type="text" value="{{ old('e_stock') }}" placeholder="Stock or Quantity"
                                class="form-control @error('e_stock') is-invalid  @enderror" id="e_stock"
                                name="e_stock">
                            @error('e_stock')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_warning">Warning</label>
                            <input type="text" value="{{ old('e_warning') }}" placeholder="Set warning alert"
                                class="form-control @error('e_warning') is-invalid  @enderror" id="e_warning"
                                name="warning">
                            @error('e_warning')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_image">Image </label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('e_image') is-invalid  @enderror"
                                    name="e_image" id="inputGroupFile02">
                                <label class="custom-file-label" for="inputGroupFile02"
                                    aria-describedby="inputGroupFileAddon02">Choose file</label>
                                @error('e_image')
                                    <span class="text-danger mt-1"> {{ $message }} </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- DELETE MODAL BOX --}}

    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete Item</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you confirm to Delete this item permanently?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(".editBtn").click(function() {
            var id = $(this).data("id");
            var name = $(this).data("name");
            var oldPrice = $(this).data("oldprice");
            var currentPrice = $(this).data("currentprice");
            var time = $(this).data("time");
            var category = $(this).data("category");
            var stock = $(this).data("stock");

            var url = "{{ route('item.update', ':id') }}";
            url = url.replace(":id", id);

            $("#e_name").val(name);
            $("#e_old_price").val(oldPrice);
            $("#e_current_price").val(currentPrice);
            $("#e_current_price").val();
            $("#e_category").val(category);
            $("#e_stock").val(stock);
            $("#e_time").val(time);
            $("#updateForm").attr("action", url);
        });

        $(".deleteBtn").click(function() {
            var id = $(this).data("id");
            var url = "{{ route('item.destroy', ':id') }}";
            url = url.replace(":id", id);

            $("#deleteForm").attr("action", url);
        })
    </script>
@endpush