@extends('admin.layouts.master')

@section('title')
    Products
@endsection

@section('css')
    @include('addOns.dataTables.css')
@endsection

@section('content')

<div class="container">

    <div class="text-center mb-5">
        <h2>
            <u>Products</u>
        </h2>
    </div>

    <div class="text-right mb-3">
        <a href="{{ route('admin.product.create') }}" class="btn btn-success">
            Create New Product
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-12 text-center">
            <table id="data-table" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Options</th>
                    </tr>
                </thead>
                <tbody>
                @foreach ($products as $product)
                    <tr>
                        <td>{{ $product->name_sr }}</td>
                        <td>{{ $product->category->name_sr }}</td>
                        <td>
                            <a href="{{ route('admin.product.edit', $product->id) }}">
                                <i class="text-success fa fa-edit"></i>
                            </a>
                            <a href="{{ route('admin.product.destroy', $product->id) }}" onclick="event.preventDefault();">
                                <form id="delete-form{{ $product->id }}" style="display:inline;" action="{{ route('admin.product.destroy', $product->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')

                                    <i id="delete" data-cid="{{ $product->id }}" class="text-danger fa fa-trash"></i>
                                </form>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection

@section('scripts')
    @include('addOns.dataTables.js')

    <script>
        $(document).ready(function(){

            //DataTable
            runDataTable(
                '#data-table',
                {
                    "columnDefs": [
                        { "orderable": false, "targets": -1 }
                    ]
                }
            );

            //Other
            $(document).on('click', '#delete', function(){
                let id = $(this).attr('data-cid');

                if( confirm("Are you sure you want to delete this product?") ){
                    $('#delete-form' + id).submit();
                }
            })

        });
    </script>
@endsection