@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 izveštaj</h2>
            <form action="{{ url('report/store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group my-3">
                    <label for="Report file">Izaberi izveštaj</label>
                    <input type="file" name="report_file" class="form-control" required>
                </div>
                <div class="form-group my-3">
                    <label for="Select wholesale">Izaberi veleprodaju</label>
                    <select name="report_wholesale" class="form-control" required>
                        <option selected disabled>Izaberi veleprodaju</option>
                        @if(!empty($wholesales) && count($wholesales) > 0)
                            @foreach ($wholesales as $wholesale)
                                <option value="{{ $wholesale->wholesale_id }}">{{ $wholesale->wholesale_name }}</option>
                            @endforeach
                        @else
                            <option selected disabled>Nismo pronašli ni jednu veleprodaju, kreirajte jednu!</option>
                        @endif
                    </select>
                </div>
                <div class="form-group my-3">
                    <label for="Report date">Izaberite datum izveštaja</label>
                    <input type="month" name="report_date" class="form-control" required>
                </div>
                <div class="form-group my-3">
                    <input type="submit" value="Zapiši izveštaj" class="btn btn-primary">
                </div>
            </form>
        </div>
        <div class="col-lg-12 my-3 text-center">
            <h2>Svi izveštaji</h2>

            <table class="table table-hover table-bordered data-table data-table-default">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Naziv izveštaja</th>
                        <th>Ukupna suma za izveštaj</th>
                        <th>Akcije</th>
                    </tr>
                </thead>
                <tbody>
                    @if(!empty($reports) && count($reports) > 0)
                        @foreach ($reports as $report)
                            <tr>
                                <td>{{ $report->report_id }}</td>
                                <td>{{ $report->report_name }}</td>
                                <td>{{ number_format(array_sum(array_column($report->reportItems->toArray(), 'report_product_sum')),2) }}</td>
                                <td>
                                    @if(!empty($report->reportItems) && count($report->reportItems) > 0)
                                        <a href="{{ url('report/show/'.$report->report_id) }}" class="btn btn-primary">Prikaži Detalje</a>
                                    @endif
                                    <a href="#" data-report-id="{{ $report->report_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>',
                },
            },
        });
        
        $("#DataTables_Table_0").on('click', '.delete-btn', (event) => {
            event.preventDefault();
            let report_id = event.target.getAttribute('data-report-id'); 
            $.ajax({
                url: "{{ url('report/delete') }}",
                type: "DELETE",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: report_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