@extends('layouts.master')

@section('page_title', 'View Details')
@section('title', 'Expenses Details')
@section('main_item', 'Expenses')
@section('sub_item', 'View Details')

@section('content')

    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="form-group">

                    <div class="form-group">
                        <a class="btn btn-default" href="{{ route('expenses.index') }}">
                            Back To List
                        </a>
                    </div>
                    <table class="table-dark table-bordered table-striped">
                        <tbody>
                            <tr>
                                <th>
                                    ID
                                </th>
                                <td>
                                    {{ $expense->id }}
                                </td>
                            </tr>

                            <tr>
                                <th>
                                    Expenses Category
                                </th>
                                <td>
                                    {{ $expense->expenses_category->name ?? 'N/A' }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Ref No
                                </th>
                                <td>
                                    {{ $expense->ref_no }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Date
                                </th>
                                <td>
                                    {{ $expense->date }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Note
                                </th>
                                <td>
                                    {{ $expense->description }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Amount
                                </th>
                                <td>
                                    {{ number_format($expense->amount, 2) }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Due Amount
                                </th>
                                <td>
                                    {{ number_format($expense->due_amount, 2) }}
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>

    @php
    $expense_payments = \App\ExpensePayment::where('expense_id', $expense->id)->get();
    $user = Auth::user();
    @endphp
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                Related Expense Payments
            </div>
            <div class="card-body">
                <div class="table-responsive dash-social">
                    <table id="datatable" class="table table-hover" style="border: 1px solid #dddddd;">
                        <thead class="thead-dark">
                            <tr>

                                <th>Action</th>
                                <th>Payment Date</th>
                                <th>Amount</th>
                                <th>Payment Method</th>
                                <th>Payment Account</th>
                                <th>Payment Note</th>

                            </tr>

                        </thead>

                        <tbody>
                            @foreach ($expense_payments as $expense_payment)
                                <tr>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-secondary dropdown-toggle" type="button"
                                                id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                                Action
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                                                <a href="javascript:void(0)" id="edit_payment"
                                                    data-href="{{ route('expense_payment.edit', $expense_payment->id) }}"
                                                    class="dropdown-item"><i class="fas fa-edit text-success font-16"></i>
                                                    Edit Payment</a>

                                                @if ($user->role_id == '1')
                                                    <a href="{{ route('expense-payment.delete', $expense_payment->id) }}"
                                                        class="dropdown-item delete-contact"><i
                                                            class="fas fa-trash-alt text-danger font-16"></i> Delete</a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $expense_payment->payment_date }}</td>
                                    <td>Rs. {{ number_format($expense_payment->amount, 2) }}</td>
                                    <td>{{ $expense_payment->payment_method }}</td>
                                    <td>{{ $expense_payment->payment_account->account_name }}</td>
                                    <td>{{ $expense_payment->payment_note }}</td>

                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <div id="edit-payment" class="modal fade">

    </div>
@endsection

@section('scripts')

    <script>
        $(document).on('click', '#edit_payment', function() {

            var today = new Date().toLocaleDateString();
            $('#edit-payment').load($(this).data('href'), function() {

                $('#mdate').bootstrapMaterialDatePicker({

                    weekStart: 0,
                    time: false

                });
                // $('#mdate').val(today);
                $('#edit-payment').modal('show');
            })
        });
        $(document).on('click', '.delete-contact', function(e) {
            e.preventDefault();


            var url = $(this).attr('href');


            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {

                    $.ajax({
                        type: "GET",
                        url: url,

                        success: function(response) {

                            if (response.success == 1) {
                                $.toast({
                                    heading: 'Success',
                                    text: response.msg,
                                    position: 'top-right',
                                    bgColor: '#1ecab8',
                                    icon: 'success',
                                    showHideTransition: 'fade',
                                    loaderBg: '#ecf0f1'
                                })

                                location.reload();
                            }


                        }
                    });

                }
            })


        });
    </script>
@endsection