@extends('layouts.base')

@section('content-header')
    <div class="col-12">
        <div class="container" style="display: contents">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0"> Pengeluaran</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">Home</li>
                        <li class="breadcrumb-item">Transaksi</li>
                        <li class="breadcrumb-item active">Pengeluaran</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="content__boxed">
        <div class="content__wrap">
            <div class="row">
                <div class="col-sm-12 mt-2">
                    <div class="card">
                        <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
                        <div class="card-header mt-0 pt-0">
                            <div class="d-flex">
                                <h4>Form Input pengeluaran</h4>
                                <!-- Button trigger modal -->
                                <div class="ml-auto">
                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#modal-default-data-kebutuhan">
                                        Data Kebutuhan
                                    </button>
                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#modal-default-data-satuan">
                                        Data Satuan
                                    </button>
                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#modal-default-data-distributor">
                                        Data Distributor
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="" method="POST" enctype="multipart/form-data" id="iniformnya">
                                @csrf
                                <div class="col-md-12">
                                    <div class="col-md-4 mt-3">
                                        <label>Tanggal Belanja</label>
                                        <input type="date" class="form-control" id="tanggal" name="tanggal_belanja"
                                            value="{{ date('Y-m-d') }}">
                                    </div>
                                    <br>
                                    <h5> Inputkan Item belanja</h5>
                                    <table id="dynamicAddRemove" width="100%">
                                        <tr>
                                            <td>
                                                <div id="card-form-item">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-md-4 mt-3"> <label>Kebutuhan</label> <select
                                                                        class="form-control" id="rekening_coa_kebutuhan"
                                                                        name="rekening_coa_kebutuhan[]" required>
                                                                        <option value="" selected>Pilih Kebutuhan
                                                                        </option>
                                                                        @foreach ($coaPengeluaran as $biaya)
                                                                            @if ($biaya->status == 0)
                                                                                <optgroup
                                                                                    label="{{ $biaya->coa }} | {{ $biaya->keterangan_coa }}">
                                                                                @else
                                                                                    <option
                                                                                        value="{{ $biaya->id }}|{{ $biaya->coa }}|{{ $biaya->keterangan_coa }}">
                                                                                        {{ $biaya->coa }} |
                                                                                        {{ $biaya->keterangan_coa }}
                                                                                    </option>
                                                                            @endif
                                                                        @endforeach
                                                                        </optgroup>
                                                                    </select> </div>
                                                                <div class="col-md-4 mt-3"> <label>Nominal</label> <input
                                                                        type="number" min="0" class="form-control"
                                                                        id="nominal" name="nominal[]"
                                                                        onchange="calculateTotalItem(this)"
                                                                        placeholder="Harga satuan atau kiloan" required>
                                                                </div>
                                                                <div class="col-md-4 mt-3"> <label>Satuan</label>
                                                                    <div class="row"> <input type="number"
                                                                            min="0" class="form-control col-md-6"
                                                                            name="satuan[]" id="satuan"
                                                                            onchange="calculateTotalItem(this)"
                                                                            placeholder="Satuan Pengeluaran" required>
                                                                        <select class="form-control col-md-6"
                                                                            id="satuan_bahan" name="pilihansatuan[]"
                                                                            required>
                                                                            <option value="" selected>--Pilih Satuan--
                                                                            </option>
                                                                            @foreach ($satuans as $satuan)
                                                                                <option value="{{ $satuan->id }}">
                                                                                    {{ $satuan->nama_satuan }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 mt-3"> <label>Supplier
                                                                        Distributor</label> <select class="form-control"
                                                                        id="supplier_distributior" name="supplier[]">
                                                                        <option value="" selected>Tanpa distributor
                                                                        </option>
                                                                        @foreach ($distributors as $distributor)
                                                                            <option value="{{ $distributor->id }}">
                                                                                {{ $distributor->nama_distributor }}
                                                                                {{ $distributor->alamat }}
                                                                                {{ $distributor->telepon }} </option>
                                                                        @endforeach
                                                                    </select> </div>
                                                                <div class="col-md-4 mt-3"> <label>Keterangan</label>
                                                                    <textarea class="form-control" id="keterangan" placeholder="Keterangan" name="keterangan[]"></textarea>
                                                                </div>
                                                                <div class="col-md-4 mt-3"> <label>Total</label>
                                                                    <h3 id="total-item"></h3>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>

                                    <button type="button" class="btn btn-warning " id="dynamic-ar">
                                        Tambah Item
                                        <i class="fa fa-plus"></i>
                                    </button>
                                    <div class="row">
                                        <div class="col-md-4 mt-3">
                                            <label>Jenis Transaksi</label>
                                            <select class="form-control" id="jenis_transaksi" name="jenis_transaksi">
                                                <option value="1" selected>Tunai</option>
                                                <option value="2">Transfer</option>
                                            </select>
                                        </div>

                                        <div hidden class="transfer col-md-4 mt-3">
                                            <label class="form-label">Rekening Coa Jenis Transaksi</label>
                                            <select class="form-control" id="rekening_coa_transfer"
                                                name="rekening_coa_transfer">
                                                <option selected disabled>--Pilih Rekening Coa--</option>
                                                @foreach ($rekeningCoaTf as $coaTf)
                                                    @if ($coaTf->status == 0)
                                                        <optgroup
                                                            label="{{ $coaTf->coa }} | {{ $coaTf->keterangan_coa }}">
                                                        @else
                                                            <option
                                                                value="{{ $coaTf->id }}|{{ $coaTf->coa }}|{{ $coaTf->keterangan_coa }}">
                                                                {{ $coaTf->coa }} | {{ $coaTf->keterangan_coa }}
                                                            </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <hr>
                                    <div style="display: flex;justify-content: flex-end;">
                                        <a href="javascript:void(0)" class="btn btn-warning"
                                            id="simpan_pengeluaran">Simpan
                                            Pengeluaran</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 mt-2">
                    <div class="card">
                        <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
                        <div class="card-body">
                            <div class="col-md-12">
                                <form action="{{ route('pengeluaran.laporan') }}" method="POST" target="_blank">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h5>Form Laporan</h5>
                                        </div>
                                        <div class="col-md-4 mt-3">
                                            <label>Dari Tanggal</label>
                                            <input type="date" class="form-control" name="filter_tanggal_1"
                                                id="filter_tanggal_1" value="{{ date('Y-m-d') }}">
                                        </div>
                                        <div class="col-md-4 mt-3">
                                            <label>Sampai Tanggal</label>
                                            <input type="date" class="form-control" name="filter_tanggal_2"
                                                id="filter_tanggal_2" value="{{ date('Y-m-d') }}">
                                        </div>
                                        <div class="col-md-4 mt-5">
                                            <div class="row">
                                                <a href="javascript:void(0)" class="btn btn-md mr-1 btn-primary"
                                                    id="btn_filter"><i class="fas fa-search mr-1"></i>Filter
                                                    data</a>
                                                <button class="btn btn-md btn-warning" type="submit"
                                                    id="filter_laporan"><i class="fas fa-print mr-1"></i>Cetak</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="table-responsive mt-3">
                                <table id="tabelku" class="table table-hover display" style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th class="text-center">No</th>
                                            <th>Faktur</th>
                                            <th>Tanggal Transaksi</th>
                                            <th>Kebutuhan</th>
                                            <th>Jenis Transaksi</th>
                                            <th>Supplier</th>
                                            <th>Satuan</th>
                                            <th>Harga</th>
                                            <th>Total</th>
                                            <th class="text-center"><i class="fas fa-cog"></i></th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th class="text-right"></th>
                                            <th class="text-right" colspan="4">Total</th>
                                            <th class="text-right"></th>
                                            <th class="text-right"></th>
                                            <th class="text-right"></th>
                                            <th class="text-right"></th>
                                            <th class="text-center"><i class="fas fa-cog"></i></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@include('pages.admin.pengeluaran.modalkebutuhan')
@include('pages.admin.pengeluaran.modalsatuan')
@include('pages.admin.pengeluaran.modaldistributor')
@include('pages.admin.pengeluaran.js')
@include('pages.admin.pengeluaran.style')