@extends('backend.admin.layouts.app')
@section('content')
    <div class="content-wrapper">

        <section class="content">
            <div class="container-fluid">


                <div class="modal fade" id="addForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Add New Expense</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form id="new_form" method="post" action="{{ route('expense.add') }}">
                                <div class="modal-body">
                                    @csrf
                                    <div class="form-group">
                                        <label for="name">Expense</label>
                                        <input type="text" required name="expense" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="amount">Amount</label>
                                        <input type="text" required name="amount" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="date">Date</label>
                                        <input type="date" value="{{ date('Y-m-d') }}" name="date" class="form-control">
                                    </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 btn_save">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">

                        <button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#addForm">
                            Add New
                        </button>
                        <div class="card mt-2">
                            <div class="card-header">
                                <h3 class="card-title">Expenses</h3>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body">
                                @can('Expense access')
                                    <table id="example1" class="table table-bordered table-striped dataTable dtr-inline"
                                        role="grid" aria-describedby="example1_info">
                                        <thead>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Expense</th>
                                                <th>Amount</th>
                                                <th>Date</th>
                                                <th>Added By</th>
                                                <th>Action</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $total = 0;
                                            @endphp
                                            @foreach ($expenses as $key => $expense)
                                                @php
                                                    $total += $expense->amount;
                                                @endphp
                                                <tr>
                                                    <td>{{ $key + 1 }}</td>
                                                    <td>{{ $expense->expense }}</td>
                                                    <td>{{ $expense->amount }}</td>
                                                    <td>{{  date('d M, Y', strtotime($expense->date))}}</td>
                                                    <td>{{ App\Models\User::where('id',$expense->added_by)->value('name') }}</td>

                                                    <td>

                                                        @can('Expense edit')
                                                        <button type="button" data-toggle="modal"
                                                            data-target="#exampleModal{{ $expense->id }}"
                                                            class="btn btn-sm btn-warning"><span
                                                                class="fa fa-edit"></span></button>
                                                        @endcan
                                                        @can('Expense delete')
                                                        <a onclick="return confirm('Are you sure?')"
                                                            href="{{ route('expense.delete', $expense->id) }}"
                                                            class="btn btn-sm btn-danger"><span class="fa fa-trash"></span></a>
                                                        @endcan
                                                    </td>
                                                </tr>

                                                <div class="modal fade" id="exampleModal{{ $expense->id }}" tabindex="-1"
                                                    role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="exampleModalLabel">Update Expense</h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <form class="update_form" method="post" action="{{ route('expense.update') }}">
                                                                <div class="modal-body">
                                                                    @csrf
                                                                    <div class="form-group">
                                                                        <label for="name">Expense</label>
                                                                        <input type="text" required value="{{ $expense->expense }}" name="expense" class="form-control">
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="amount">Amount</label>
                                                                        <input type="text" value="{{ $expense->amount  }}" required name="amount" class="form-control">
                                                                    </div>

                                                                    <div class="form-group">
                                                                        <label for="date">Date</label>
                                                                        <input type="date" max="{{ date('Y-m-d') }}" value="{{ date('Y-m-d',strtotime($expense->date.'+1 days')) }}" name="date" class="form-control">
                                                                    </div>

                                                                    <input type="hidden" name="id"
                                                                        value="{{ $expense->id }}">
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary"
                                                                        data-dismiss="modal">Close</button>
                                                                    <button type="submit"
                                                                        class="btn btn-primary btn_save">Save</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach



                                        </tbody>

                                        <tr>
                                            <td colspan="2">Total</td>
                                            <th  class="text-left">{{ $total }}</th>
                                            <td colspan="3"></td>
                                        </tr>
                                    </table>
                                @endcan
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <!-- /.content -->
    </div>

    <script>
        // $("#new_form").submit(function(e) {
        //     e.preventDefault();
        //     let data = $(this).serialize()
        //     $.ajax({
        //         type: "post",
        //         url: "{{ route('expense.add') }}",
        //         data: data,
        //         beforeSend: function() {
        //             $(".btn_save").html(
        //                 `<span class="spinner-border spinner-border-sm text-white" ></span> Loading...`
        //             ).attr('disabled', true);
        //         },
        //         complete: function() {
        //             $(".btn_save").html("Save").attr('disabled', false);
        //         }
        //     }).done(function(response) {
        //         toastr.options = {
        //             "closeButton": true,
        //             "progressBar": true
        //         }
        //         toastr.success(response.message);
        //         setTimeout(() => {
        //             location.reload()
        //         }, 2000);
        //     }).fail(function(response) {

        //         console.log(response.responseJSON.message)
        //         toastr.options = {
        //             "closeButton": true,
        //             "progressBar": true
        //         }
        //         toastr.error(response.responseJSON.message);
        //     });
        // });

        // $(".update_form").submit(function(e) {
        //     e.preventDefault();
        //     let data = $(this).serialize()
        //     $.ajax({
        //         type: "post",
        //         url: "{{ route('expense.update') }}",
        //         data: data,
        //         beforeSend: function() {
        //             $(".btn_save").html(
        //                 `<span class="spinner-border spinner-border-sm text-white" ></span> Loading...`
        //             ).attr('disabled', true);
        //         },
        //         complete: function() {
        //             $(".btn_save").html("Save").attr('disabled', false);
        //         }
        //     }).done(function(response) {
        //         toastr.options = {
        //             "closeButton": true,
        //             "progressBar": true
        //         }
        //         toastr.success(response.message);

        //         setTimeout(() => {
        //             location.reload()
        //         }, 2000);
        //     }).fail(function(response) {

        //         console.log(response.responseJSON.message)
        //         toastr.options = {
        //             "closeButton": true,
        //             "progressBar": true
        //         }
        //         toastr.error(response.responseJSON.message);
        //     });
        // });
    </script>
@endsection