@extends('layouts.main')

@section('title','Log Pesan')
@section('header','Log Pesan')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Log Pesan</li>
@endsection

@section('content')

<div class="card">
    <div class="card-header with-border">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">From</label>
                    <input type="date" name="date_from" class="form-control form-control-sm" placeholder="From">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">To</label>
                    <input type="date" name="date_to" class="form-control form-control-sm" placeholder="To">
                </div>
            </div>
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Filter</label>
                    <select class="form-control form-control-sm" name="filter">
                        <option selected value="None">None</option>
                        <option value="">All</option>
                        <option>Today</option>
                        <option>This Month</option>
                        <option>This Year</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-2"></div>
            
            <div class="col-md-2"></div>
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">&nbsp;</label>
                    <button class="form-control form-control-sm btn btn-md btn-refresh btn-info">REFRESH</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header with-border">
        <div class="row">
            @if($user->level_user == 1)
            <div class="col-md-4">
                <div class="form-group">
                    <label class="form-control-label">Pendaftaran</label>
                    <select name="id_pendaftaran" class="form-control form-control-sm" required autofocus>
                        <option selected value="">All</option>
                        @foreach($pendaftaran as $pend)
                        <option value="{{$pend->id}}">({{$pend->status_pendaftaran}}) {{$pend->jenis_sekolah->jenis_sekolah}} - Tahun Ajaran {{$pend->tahun_ajaran->tahun_ajaran}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            @else
                @if($user->jenis_sekolah)
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-control-label">Pendaftaran</label>
                        <input class="form-control form-control-sm" readonly value="{{$user->jenis_sekolah->jenis_sekolah}}">
                    </div>
                </div>
                @endif
            @endif
            <div class="col-md-2"></div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>

<div class="card card-primary">
    <div class="card-body">
        <div class="dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>

@endsection
@push('custom-scripts')
<script>
    $('select[name=id_pendaftaran]').select2();
    var param = {
        filter: "None",
        status_aktif: "ALL"
    }
    $(document).ready(function(e){
        if (param.filter === "None") {
        $('.el-waiting-message').text('Filter None, please select Filter or click Refresh to show Data.');
        } else {
            loadThis(param);
        }
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
            status_aktif: "ALL"
        };
        $('select[name=id_pendaftaran]').val('').trigger('change');
        $('select[name=filter]').val('');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        loadThis(param);
    });
    $(document).on('change', 'select[name=filter]', function(e){
        e.preventDefault();
        param.filter = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=id_pendaftaran]', function(e){
        e.preventDefault();
        param.id_pendaftaran = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'input[name=date_to]', function(e){
        e.preventDefault();
        param.date_to = $(this).val();
        if(param.date_from) loadThis(param);
    });
    $(document).on('change', 'input[name=date_from]', function(e){
        e.preventDefault();
        param.date_from = $(this).val();
        if(param.date_to) loadThis(param);
    });
    
    function loadThis(params){
        url = "/web_api/log_tagihan_siswa/getLogPesan";
        th = '<th>NAMA LENGKAP</th>' +
             '<th>EMAIL</th>' +
             '<th>PENDAFTARAN</th>' +
             '<th width="5%">TIPE PESAN</th>' +
             '<th>PENERIMA</th>' +
             '<th>KONTAK</th>' +
             '<th>PESAN</th>' +
             '<th>STATUS</th>' +
             '<th>SEND BY</th>' +
             '<th>DATE</th>';
        columns = [
                    { "data": "id_pesan", 'className':'text-center nowrap'},
                    { "data": "id_pesan", 'className':'text-center nowrap'},
                    { "data": "id_pesan", 'className':'text-center nowrap'},
                    { "data": "tipe_pesan", 'className':'text-center'},
                    { "data": "penerima", 'className':'text-center nowrap'},
                    { "data": "penerima", 'className':'text-center nowrap'},
                    { "data": "pesan", 'className':'text-center nowrap'},
                    { "data": "status_kirim", 'className':'text-center nowrap'},
                    { "data": "send_by", 'className':'text-center nowrap'},
                    { "data": "created_at", 'className':'text-center nowrap'},
                  ];
    
        col_def = [
                {
                    "targets" : 0,
                    "data": "id_pesan",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        return row.nama_lengkap;
                    }
                },
                {
                    "targets" : 1,
                    "data": "id_pesan",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        return row.email;
                    }
                },
                {
                    "targets" : 2,
                    "data": "id_pesan",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        return row.text_pendaftaran;
                    }
                },
                {
                    "targets" : 5,
                    "data": "penerima",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        if(!row.pesan_no_hp) return row.pesan_email;
                        if(!row.pesan_email) return row.pesan_no_hp;
                    }
                },
                {
                    "targets" : 8,
                    "data": "send_by",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        if(!row.send_by_user) return '-';
                        return row.send_by_user.nama_lengkap;
                    }
                },
                {
                    "targets" : 9,
                    "data": "log_created_at",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        return row.log_created_date;
                    }
                },
                
            ];   
        
        order = [[0, 'desc']];
        sDom = ''; 
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableRow', 2, 0);
    }
</script>


@endpush