@extends('backoffice.template.app')

@section('script')
@if (session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Sukses!',
        text: "{{ session('success') }}",
    })

</script>
@endif

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


        $('.dropify').dropify({


            tpl: {

                message: '<div class="dropify-message"><span class="file-icon" /></div>',
            }


        });


    });

</script>

<script>
    $(document).ready(function () {
        $('#table-cashflow').DataTable();
    });

</script>
@endsection

@section('content')
<h4 class="fw-bold py-3 mb-2 d-flex justify-content-between">
    <span>
        <span class="text-muted fw-light">Admin /</span> Cashflow
    </span>
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createModal">Tambah
        Cashflow</button>
</h4>
<!--/ Total Revenue -->
<div class="col-12 col-md-12 col-lg-12 order-3 order-md-2">
    <div class="row">
        <div class="col-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title mb-2">@currency($pemasukkan - $pengeluaran)</h3>
                    <small class="text-primary fw-semibold">TOTAL DANA</small>
                </div>
            </div>
        </div>
        <div class="col-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title mb-2">@currency($pemasukkan)</h3>
                    <small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> TOTAL PEMASUKKAN</small>
                </div>
            </div>
        </div>
        <div class="col-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title text-nowrap mb-2">@currency($pengeluaran)</h3>
                    <small class="text-danger fw-semibold"><i class="bx bx-down-arrow-alt"></i> TOTAL
                        PENGELUARAN</small>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="card py-5 px-4">
    <table class="table table-striped" id="table-cashflow">
        <thead>
            <tr>
                <th>No</th>
                <th>Nominal</th>
                <th>Nama</th>
                <th>Dokumen</th>
                <th>Deskripsi</th>
                <th>Jenis</th>
                <th>Dibuat pada</th>
                <th>Diubah pada</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($cashflow as $item)
            <tr>
                <td>{{$loop->iteration}}</td>
                <td>@currency($item->nominal)</td>
                <td>{{$item->nama}}</td>
                <td> <img width="100" src="{{ asset('storage/' . $item->dokumen) }}" alt="foto"></td>
                <td>{{$item->deskripsi}}</td>
                <td>
                    @if ($item->jenis == 1)
                    <span class="alert alert-success p-1">PEMASUKKAN</span>
                    @else
                    <span class="alert alert-danger p-1">PENGELUARAN</span>
                    @endif
                </td>
                <td>{{$item->created_at->diffForHumans()}}</td>
                <td>{{$item->updated_at->diffForHumans()}}</td>
                <td style="white-space: nowrap;">
                    <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
                    <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete</button>
                </td>

                {{-- MODAL EDIT --}}
                <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel"
                    aria-hidden="true">
                    <form action="{{ route('backoffice.cashflow.update', $item->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="editModalLabel">Edit Cashflow</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">

                                    <div class="mb-3">
                                        <label for="jenis" class="form-label">Jenis</label>
                                        <select class="form-select" id="jenis" aria-label="Default select example"
                                            name="jenis">
                                            <option disabled>Pilih Jenis</option>
                                            <option value="1" @if ($item->jenis == 1) selected @endif>Pemasukkan
                                            </option>
                                            <option value="2" @if ($item->jenis == 2) selected @endif>Pengeluaran
                                            </option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="nominal" class="form-label">Nominal</label>
                                        <input required type="number" name="nominal" class="form-control" id="nominal"
                                            value="{{$item->nominal}}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="dokumen" class="form-label">Dokumen</label>
                                        <input type="file" class="dropify" name="dokumen">
                                    </div>
                                    <div class="mb-3">
                                        <label for="nama" class="form-label">Nama</label>
                                        <input required type="text" class="form-control" id="nama" name="nama"
                                            value="{{$item->nama}}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="nama" class="form-label">Deskripsi</label>
                                        <textarea class="form-control" name="deskripsi" id="deskripsi" cols="30"
                                            rows="10">{{$item->deskripsi}}</textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-success">Update Cashflow</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                {{-- MODAL DELETE --}}
                <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel"
                    aria-hidden="true">
                    <form method="POST" action="{{route('backoffice.cashflow.delete', $item->id)}}">
                        @csrf
                        @method('delete')
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="deleteModalLabel">Hapus Cashflow</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">

                                    Apa Anda Yakin Menghapus Cashflow Ini ?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-danger">Hapus Cashflow</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

{{-- MODAL CREATE --}}
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
    <form action="{{ route('backoffice.cashflow') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="createModalLabel">Tambah Casfflow</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-3">
                        <label for="jenis" class="form-label">Jenis</label>
                        <select class="form-select" id="jenis" name="jenis">
                            <option selected disabled>Pilih Jenis</option>
                            <option value="1">Pemasukkan</option>
                            <option value="2">Pengeluaran</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="nominal" class="form-label">Nominal</label>
                        <input required type="number" class="form-control" id="nominal" name="nominal">
                    </div>
                    <div class="mb-3">
                        <label for="dokumen" class="form-label">Dokumen</label>
                        <input type="file" class="dropify" name="dokumen" required>
                    </div>

                    <div class="mb-3">
                        <label for="nama" class="form-label">Nama</label>
                        <input required type="text" class="form-control" id="nama" name="nama">
                    </div>
                    <div class="mb-3">
                        <label for="nama" class="form-label">Deskripsi</label>
                        <textarea class="form-control" name="deskripsi" id="deskripsi" cols="30" rows="10"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Tambah Cashfow</button>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection