@php 
    $idtable = isset($idtable) ? $idtable : "table-data";
@endphp
<div class="row" id="saku-datatable" style="display:none">
    <div class="col-12">
        <div class="card" >
            <div class="card-body py-3" style="min-height:62px">
                <h6 style="position:absolute;top: 15px;" id="judul-datatable">{{ $judul }}</h6>
                @if($tambah)
                <button type="button" id="btn-tambah" class="btn btn-primary" style="float:right;"> 
                    <i class="fa fa-plus-circle mr-1"></i>
                    Tambah</button>
                @endif
            </div>
            <div class="row" style="padding-right:1.5rem;padding-left:1.5rem">
                <div class="dataTables_length col-sm-12" id="{{$idtable}}_length"></div>
                <div class="d-block d-md-inline-block col-md-7 col-sm-12 pr-0">
                    <div class="page-countdata d-inline-block">
                        <select id="page-count-listdata" class="form-control" style="width:250px">
                        @if(!isset($optionpage))
                            <option value="10">Tampilkan 10 per halaman</option>
                            <option value="25">Tampilkan 25 per halaman</option>
                            <option value="50">Tampilkan 50 per halaman</option>
                            <option value="100">Tampilkan 100 per halaman</option>
                        @else
                            @if(count($optionpage) == 0)
                                <option value="10">Tampilkan 10 per halaman</option>
                                <option value="25">Tampilkan 25 per halaman</option>
                                <option value="50">Tampilkan 50 per halaman</option>
                                <option value="100">Tampilkan 100 per halaman</option>
                            @else
                                @for($i=0; $i < count($optionpage); $i++ )
                                    <option value="{{ $optionpage[$i] }}">Tampilkan {{ $optionpage[$i] }} per halaman</option>
                                @endfor
                            @endif
                        @endif
                        </select>
                    </div>
                    <button id="btn-refresh-table" title="refresh" class="btn btn-white float-right">
                        <img src="{{ asset('asset_dore/icon/fi-bs-refresh.svg') }}" alt="" class="mr-1" style="width:14px;height:14px"> Refresh
                    </button>
                    <button id="btn-filter-table" title="filter" class="btn btn-white float-right mr-2">
                        <img src="{{ asset('asset_dore/icon/Filter.png') }}" alt="" class="mr-1" style="width:14px;height:14px"> Filter
                    </button>
                    {{-- <button id="btn-export-table" title="export" class="btn btn-white float-right mr-2">
                        Export <img src="{{ asset('asset_dore/icon/fi-sr-caret-right.svg') }}" alt="" class="ml-3" style="width:14px;height:14px;transform: rotate(90deg);float: right;position: relative;top: 5px;right: 0;"> 
                    </button> --}}
                    <div class="dropdown float-right mr-2">
                        <button class="btn btn-white dropdown-toggle" type="button" id="btn-export-table" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Export <img src="{{ asset('asset_dore/icon/fi-sr-caret-right.svg') }}" alt="" class="ml-3" style="width:14px;height:14px;transform: rotate(90deg);float: right;position: relative;top: 5px;right: 0;"> 
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btn-export-table">
                          <a class="dropdown-item" id="btn-csv-table" href="#">CSV</a>
                          <a class="dropdown-item" id="btn-excel-table" href="#">Excel</a>
                          <a class="dropdown-item" id="btn-copy-table" href="#">Copy</a>
                          <a class="dropdown-item" id="btn-pdf-table" href="#">PDF</a>
                        </div>
                    </div>
                </div>
                <div class="d-block d-md-inline-block col-md-5 col-sm-12 pr-0">
                    <input type="text" class="form-control" placeholder="Cari Data"
                    aria-label="Cari..." aria-describedby="filter-btn" id="searchData">
                    <img src="{{ asset('asset_dore/icon/Search.png') }}" alt="" class="mr-1" style="width:14px;height:14px;position: absolute;top:7px;margin-left:15px">
                </div>
            </div>
            <div class="card-body pb-0 px-0" style="min-height:calc(100vh - 160px);padding-top:1rem;">
                <div class="table-responsive ">
                   
                    @if(isset($tpwidth) && $tpwidth != "-")
                    @php 
                        $html = ""; $to_width=0;
                        for($i=0; $i < count($thead); $i++ ){
                            $html .='<th style="width:'.$thwidth[$i].''.$tpwidth.'!important" class="'.$thclass[$i].'">'.$thead[$i].'</th>';
                            $to_width+= intval($thwidth[$i]);
                        }
                    @endphp
                    <table id="{{$idtable}}" class="table table-borderless" style="width:{{ $to_width.$tpwidth }}!important">
                        <thead>
                            <tr>
                                {!! $html !!}
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    @else
                    <table id="{{$idtable}}" class="table table-borderless" style='width:100%'>
                        <thead>
                            <tr>
                            @for($i=0; $i < count($thead); $i++ )
                                <th style="width:{{ $thwidth[$i] }}%" class="{{ $thclass[$i] }}">{{ $thead[$i] }}</th>
                            @endfor
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('asset_dore/js/list-data.js') }}"></script>
@include('modal_preview')