@extends('layouts.app')

@section('content')
	<div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Data Rencana</h3>
                
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Data Rencana</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section">
		<div class="card">
            <div class="card-header">
                Point
                 <div class="float-end">
                    @if($akses->is_add == 1)
                        <button class="btn btn-primary" onclick="loadForm(0)"><span class="bi bi-plus">TAMBAH</span></button>
                    @endif
                    <!-- <button class="btn btn-info" onclick="table.draw()"><span class="bi bi-search">RELOAD</span></button> -->
                    @if($akses->is_export == 1)
                        <a class="btn btn-primary" href="#"  onclick="exportData(0)" data-id="0">Export Data  </a>
                                
                    @endif
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="card-body" >
               <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Cabang</label>
                            <select class="form-select select2" id="lokasi-search">
                                <option value="">Pilih Cabang</option>
                                @foreach($lokasi as $row)
                                    <option value="{{ $row->id }}">{{ $row->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Divisi</label>
                            <select class="form-select select2" id="divisi-search">
                                <option value="">Pilih Divisi</option>
                                @foreach($divisi as $row)
                                    <option value="{{ $row->id }}">{{ $row->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Jabatan</label>
                            <select class="form-select select2" id="jabatan-search">
                                <option value="">Pilih Jabatan</option>
                                @foreach($jabatan as $row)
                                    <option value="{{ $row->id }}">{{ $row->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row g-3 mt-3">
                        <div class="col-auto">
                            <label for="staticEmail2">Tanggal</label>
                        </div>
                        <div class="col-auto">
                            <div class="input-group mb-3">
                                <input type="text" id="earlyDate" name="earlyDate" class="form-control flatpickr"
                                    value="{{ date('Y-m-d') }}">
                                <span class="input-group-text">to</span>
                                <input type="text" id="lastDate" name="lastDate" class="form-control flatpickr"
                                    value="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="col-auto">
                            <!-- <button type="button" class="btn btn-primary mb-3" onClick="updateData()">Filter</button> -->
                            <button class="btn btn-info" onclick="table.draw()"><span class="bi bi-search">RELOAD</span></button>
                        </div>
                    </div>

               </div>
               
                <div class="col-lg-12 col-12">
                    
                    <table class="table table-striped table-bordered" id="datatables" style="width:100%">
                        <thead>
                            <tr>
                                <th>Aksi</th>
                                <th>Tanggal</th>
                                <th>Nama</th>
                                <th>Jabatan</th>
                                <th>Lokasi</th>
                                <th>Rencana</th>
                                <th>Progress</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                
			</div>
		</div>
	</section>
@endsection

@push("modals")
   @include('pages.task.rencana.form')
   
@endpush
   
@push('scripts')
	<script>
        var table;
		$(function(){
            table = $('#datatables').DataTable({
                serverSide:true,
                processing:true,
                responsive: true,
                ajax:{
                    method:"POST",
                    url:"{{ url('task/rencana/data') }}",
                    data:(d) => {
                        d.jabatan = $('#jabatan-search').val();
                        d.lokasi = $('#lokasi-search').val();
                        d.divisi = $('#divisi-search').val(); 
                        d.tanggal_awal = $('#earlyDate').val(); 
                        d.tanggal_akhir = $('#lastDate').val(); 
                    }
                },
                columns:[
                    {data:"aksi",render:(data,type,row) => {
                        var button = "";
                            button += `<li><a class="dropdown-item" href="#" onclick="loadForm(${row.id})">EDIT</a></li>`;
                            
                            button += `<li><a class="dropdown-item" href="#" onclick="delData(${row.id})">DELETE</a></li>`;
                        return `<div class="dropdown ">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                AKSI
                                </button>
                                <ul class="dropdown-menu dropdown-menu-dark"  aria-labelledby="dropdownMenuButton1">
                                ${button}
                                </ul>
                            </div>`
                    },orderable:false,searchable:false},
                    {data:"created_at",
                        render: (data) => {
                            return moment(data).format('DD-MM-YYYY');
                        }
                    },    
                    {data:"karyawan.nama"},
                    {data:"karyawan.jabatan.nama",
                        render: (data) => {
                            return (data == null)? '-': data;
                        }
                    },
                    {data:"karyawan.lokasi.nama",
                        render: (data) => {
                            return (data == null)? '-': data;
                        }
                    },
                    {data:"rencana"},
                    {data:"progress"},
                ]
            });
        });

        function exportData(){
            let jabatan = ($('#jabatan-search').val() == '') ? '-' : $('#jabatan-search').val();
            let lokasi = ($('#lokasi-search').val() == '') ? '-' : $('#lokasi-search').val();
            let divisi = ($('#divisi-search').val() == '') ? '-' : $('#divisi-search').val();
            let earlyDate = ($('#earlyDate').val() == '') ? '-' : $('#earlyDate').val();;
            let lastDate = ($('#lastDate').val() == '') ? '-' : $('#lastDate').val() ;;
            
            window.location.href = `{{ url('task/rencana/export') }}/${lokasi}/${divisi}/${jabatan}/${earlyDate}/${lastDate}`;
        }
					
		function delData(id) {
       
            Notiflix.Confirm.show("KONFIRMASI","Apakah yakin akan menghapus data ini?","YA","TIDAK",() => {
                $.post("{{ url('task/rencana/delete') }}",{id,id}).done(resp => {
                    if (resp.error == false) {
                        Notiflix.Notify.success("Data Berhasil dihapus");
                        table.draw();
                    } else {
                        Notiflix.Notify.failure(resp.message);
                    }
                }).fail( err => {
                    Notiflix.Notify.failure(err.responseText);
                })
            })
        }		
	</script>
@endpush