@extends('temp.admin')
@php
use NN\Module\DB;
@endphp
@section("content")
<noscript id="rek">{!! json_encode(DB::query_result_object("SELECT kode id, nama text, app FROM acc")) !!}</noscript>
<script>
    globalThis.acc = JSON.parse(document.getElementById('rek').innerHTML);
</script>
<div class="content-header row">
    <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">Transaksi</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active" id="coatitle">Jurnal Memorial</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="content-header-right col-md-6 col-12">
        <div class="btn-group float-md-right" style="display:none;">
            <ul class="list-inline mb-0">
                <li style="max-width:140px">
                    <fieldset class="form-group position-relative">
                        <input type="text" value="18-04-2023" class="period datepicker form-control form-control-sm input-sm mb-1" id="tglawal" placeholder="Tanggal Awal">
                        <div class="form-control-position">
                            <i class="la la-calendar-o font-small-4"></i>
                        </div>
                    </fieldset>
                </li>
                <li style="max-width:140px">
                    <fieldset class="form-group position-relative">
                        <input type="text"value="18-04-2023" class="period datepicker form-control form-control-sm input-sm mb-1" id="tglakhir" placeholder="Tanggal Akhir">
                        <div class="form-control-position">
                            <i class="la la-calendar-o font-small-4"></i>
                        </div>
                    </fieldset>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="content-body">
    <section id="dasbor">
        <div class="row">
            <div class="col-sm-12">
                <div class="card border-top-3 border-top-vds mb-5">
                    <div class="card-content collapse show">
                    <div class="card-header panel-head-menu" style="border-bottom: 1px solid #ddd;">
                        <div class="btn-group">
                            <button type="button" class="btn btn-secondary btn-min-width dropdown-toggle"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-printer"></i>
                                Export</button>
                            <div class="dropdown-menu" id="listreportmenu">
                                
                            </div>
                        </div>
                        <button class="btn btn-success new"><i class="icon-plus"></i> Baru </button>
                        <button class="btn btn-default" onclick="_load()"><i class="la la-refresh"></i></button>
                    </div>
                    <div class="card-body">        							
                            <div id="underground">

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

<div id="modala" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title title-f"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row" id="containerforms">
            
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary simpan"><i class="icon-folder"></i> Simpan</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Tutup</button>
      </div>
    </div>
  </div>
</div>

@endsection

@section('css')
@include('temp.modalfull')
<style>
    .form-s{
        padding: 10px !important;
        height: 35px
    }
    .dataTable tr th:nth-child(2),.dataTable tr td:nth-child(2){
        min-width: 100px !important;
    }
    .dataTable tr th:nth-child(5),.dataTable tr td:nth-child(5){
        min-width: 80px !important;
    }
    .dataTable tr th:nth-child(6),.dataTable tr td:nth-child(6){
        min-width: 160px !important;
    }
    .dataTable tr th:nth-child(7),.dataTable tr td:nth-child(7){
        text-align: right;
        white-space: nowrap;
        min-width: 110px !important;
    }
    .dataTable tr th:nth-child(8),.dataTable tr td:nth-child(8){
        text-align: right;
        white-space: nowrap;
        min-width: 110px !important;
    }
    .modal-content {
        border: none;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .modal-header {
        background-color: #1B5E20; /* Warna hijau koperasi */
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 15px 20px;
    }

    .modal-header .close {
        color: white;
        opacity: 0.8;
        text-shadow: none;
    }

    .modal-header .close:hover {
        opacity: 1;
    }

    .modal-body {
        background-color: #E8F5E9; /* Warna hijau muda */
        padding: 20px;
    }

    .modal-footer {
        background-color: #1B5E20; /* Warna hijau koperasi */
        border-top: 1px solid #0D3B1E;
        padding: 15px 20px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    /* Style khusus untuk button di dalam modal */
    .modal-footer .btn-primary {
        background-color: #E8F5E9 !important; /* Warna hijau sangat cerah */
        border: none;
        color: #424242; /* Text abu-abu gelap */
        font-weight: 600;
        padding: 8px 20px;
        border-radius: 5px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba(76, 175, 80, 0.1);
    }

    .modal-footer .btn-primary:hover {
        background-color: #C8E6C9 !important; /* Warna hijau cerah saat hover */
        border-color: #A5D6A7;
        transform: translateY(-2px);
        color: #424242 !important;
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2);
    }

    .modal-footer .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
    }

    .modal-footer .btn-secondary {
        background-color: #90A4AE !important; /* Warna abu-abu cerah */
        border-color: #90A4AE;
        color: white;
        font-weight: 600;
        padding: 8px 20px;
        border-radius: 5px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba(144, 164, 174, 0.2);
    }

    .modal-footer .btn-secondary:hover {
        background-color: #78909C !important; /* Warna abu-abu cerah lebih gelap saat hover */
        border-color: #78909C;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(144, 164, 174, 0.3);
    }

    .modal-footer .btn-secondary:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(144, 164, 174, 0.2);
    }


    #containerforms {
        background-color: white;
        padding: 20px;
        margin: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
</style>
@endsection

@section('script')
<script>
    var objectForm = {};
    globalThis.ObjDataMain = [];
</script>
@include('admin.transaksi.conf')
@endsection