@extends('layouts.main-layout')

@section('title')
    {{ config('app.name') }} - Home
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6 text-center">
            <h2>Registruj novi proizvod</h2>
            <form action="{{ url('product/store') }}" method="POST">
                @csrf
                <div class="form-group my-3">
                    <label for="Product name">Naziv proizvoda</label>
                    <input type="text" name="product_name" class="form-control shadow-lg" placeholder="Ime..." required minlength="3" maxlength="255">
                </div>
                <div class="form-group my-3">
                    <label for="Product price">Cena proizvoda</label>
                    <input type="number" name="product_price" step="0.01" class="form-control shadow-lg" placeholder="798.99" required min="0.01">
                </div>
                <div class="form-group my-3">
                    <input type="submit" value="Zapiši proizvod" class="btn btn-primary">
                </div>
            </form>
        </div>
        <div class="col-lg-12 my-3 text-center">
                <h2>Svi proizvodi</h2>
                
                <table class="table table-hover table-bordered data-table data-table-default">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Naziv proizvoda</th>
                            <th>Cena proizvoda</th>
                            <th>Akcije</th>
                        </tr>
                    </thead>
                    <tbody>
                    @if(!empty($products) && count($products) > 0)
                        @foreach($products as $product)
                            <tr>
                                <td>{{ $product->product_id }}</td>
                                <td>{{ $product->product_name }}</td>
                                <td>{{ number_format($product->currentPrice->product_price, 2) }}</td>
                                <td>
                                    <a href="{{ url('product/show/'.$product->product_id) }}" class="btn btn-primary">Prikaži Detalje</a>
                                    <a href="{{ url('product/edit/'.$product->product_id) }}" class="btn btn-warning">Izmeni</a>
                                    <a href="#" data-product-id="{{ $product->product_id }}" class="btn btn-danger delete-btn">Izbriši</a>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $(".data-table-default").DataTable({
            responsive: true,
            language: {
                paginate: {
                    previous: '<i class="fa fa-angle-left"></i>',
                    next: '<i class="fa fa-angle-right"></i>',
                },
            },
        });
    });

    $(".delete-btn").click(function(){
            let product_id = $(this).data('product-id');
            $.ajax({
                url: "{{ url('product/delete') }}",
                type: "DELETE",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: product_id
                },
                success: function(response){
                    console.log("Response: ", response);
                    if(response.status == 'success'){
                        window.location.reload();
                    }
                },
                error: function(response){
                    console.log("Error: ", response);
                    let res = JSON.parse(response.responseText);

                    if(res.status == 'errors'){
                        swal({
                            icon: 'error',
                            title: 'Oops...',
                            text: res.message,
                        });
                        return;
                    }
                    swal({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Nešto je pošlo po zlu, molimo pokušajte ponovo kasnije!',
                    });
                }
            });
        });
</script>
@endsection