@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
  {{-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"> --}}
  {{-- <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css"> --}}
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Perusahaan</a></li>
    <li class="breadcrumb-item active" aria-current="page">Konfigurasi</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Data Konfigurasi</h6>
        <div class="table-responsive">
            <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                <thead>
                    <tr>
                        <th class="kolomNomor">No.</th>
                        <th>Nama Perusahaan</th>
                        <th>Kode Dokumen</th>
                        <th>Hooked</th>
                        <th>Last Sync</th>
                        <th>Toko</th>
                        <th class="kolomAksi">Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        <button class="btn btn-info btn-custom1" id="tambahKonfigurasi">Tambah Data</button>
        @if (!isWebMaster())
            <button class="btn btn-secondary" onclick="syncSetup()">Sync Setup</button>
        @endif
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalKonfigurasi" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Konfigurasi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_konfigurasi" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Perusahaan</label>
                                <input type="text" class="form-control required" name="nama_perusahaan" autocomplete="off" placeholder="Nama Perusahaan">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">NPWP</label>
                                <input type="text" class="form-control required" name="npwp" autocomplete="off" placeholder="NPWP">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Level</label>
                                <select name="level" id="level" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="pusat">Pusat</option>
                                    <option value="cabang">Cabang</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Kode Dokumen</label>
                                <input type="text" class="form-control required" name="kode_dokumen" id="kode_dokumen" placeholder="Kode Dokumen">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Hooked</label>
                                <select name="hooked" id="hooked" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="1">YA</option>
                                    <option value="0">TIDAK</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Logo</label>
                                <input type="file" class="form-control" id="logo" name="logo" autocomplete="off" placeholder="Logo">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Favicon</label>
                                <input type="file" class="form-control" id="favicon" name="favicon" autocomplete="off" placeholder="Favicon">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nomor HP Owner</label>
                                <input type="text" class="form-control" name="nomor_hp_owner" autocomplete="off" placeholder="Nomor HP Owner">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nomor Telepon</label>
                                <input type="text" class="form-control" name="nomor_telepon" autocomplete="off" placeholder="Nomor Telepon">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="text" class="form-control" name="email" autocomplete="off" placeholder="Email">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Fax</label>
                                <input type="text" class="form-control" name="fax" autocomplete="off" placeholder="Fax">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Website</label>
                                <input type="text" class="form-control" name="website" autocomplete="off" placeholder="Website">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Printer 1</label>
                                <input type="text" class="form-control" id="nama_printer" name="nama_printer" autocomplete="off" placeholder="Nama Printer 1">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">DNS Printer 1</label>
                                <input type="text" class="form-control" id="dns_printer" name="dns_printer" autocomplete="off" placeholder="DNS Printer 1">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Printer 2</label>
                                <input type="text" class="form-control" id="nama_printer2" name="nama_printer2" autocomplete="off" placeholder="Nama Printer 2">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">DNS Printer 2</label>
                                <input type="text" class="form-control" id="dns_printer2" name="dns_printer2" autocomplete="off" placeholder="DNS Printer 2">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Printer 3</label>
                                <input type="text" class="form-control" id="nama_printer3" name="nama_printer3" autocomplete="off" placeholder="Nama Printer 3">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">DNS Printer 3</label>
                                <input type="text" class="form-control" id="dns_printer3" name="dns_printer3" autocomplete="off" placeholder="DNS Printer 3">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Printer 4</label>
                                <input type="text" class="form-control" id="nama_printer4" name="nama_printer4" autocomplete="off" placeholder="Nama Printer 4">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">DNS Printer 4</label>
                                <input type="text" class="form-control" id="dns_printer4" name="dns_printer4" autocomplete="off" placeholder="DNS Printer 4">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Alamat</label>
                                <textarea name="alamat" id="alamat" class="form-control" cols="30" rows="10" placeholder="Alamat"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Footer PO</label>
                                <textarea name="footer_po" id="footer_po" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanKonfigurasi" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  {{-- <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> --}}
  {{-- <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script> --}}
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    var URLs = "{{ url('perusahaan/konfigurasi') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      responsive: true,
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'nama_perusahaan', name: 'nama_perusahaan'},
        {data: 'kode_dokumen', name: 'kode_dokumen', defaultContent: '-'},
        {data: 'hooked', name: 'hooked'},
        {
            data: 'last_sync',
            name: 'last_sync',
            render: function(data){
                return data != null ? moment(data).format('DD-MM-YYYY HH:mm:ss') : '-';
            }
        },
        {data: 'lihat_toko', name: 'lihat_toko', searchable: false, orderable: false, class: 'text-center'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

    $('#tambahKonfigurasi').on('click', function(e){
        // stat = "add";
        // $('#modalKonfigurasi').modal('show');

        window.location.href = URLs+"/create";
    });

    $('#btnSimpanKonfigurasi').on('click', function(e){
        if (cekForm('form_konfigurasi') == true) {
            var data = new FormData();
            data.append('_token', "{{ csrf_token() }}");
            data.append('nama_perusahaan', $('[name="nama_perusahaan"]').val());
            data.append('level', $('[name="level"]').val());
            data.append('kode_dokumen', $('[name="kode_dokumen"]').val());
            data.append('hooked', $('[name="hooked"]').val());
            data.append('nomor_hp_owner', $('[name="nomor_hp_owner"]').val());
            data.append('nomor_telepon', $('[name="nomor_telepon"]').val());
            data.append('email', $('[name="email"]').val());
            data.append('fax', $('[name="fax"]').val());
            data.append('website', $('[name="website"]').val());

            var cekPrinter = false;
            if($('#nama_printer').val() != null && $('#nama_printer').val() != '' && $('#dns_printer').val() != null && $('#dns_printer').val() != ''){
                data.append('nama_printer', $('[name="nama_printer"]').val());
                data.append('dns_printer', $('[name="dns_printer"]').val());
            }else if(($('#nama_printer').val() == null || $('#nama_printer').val() == '') && ($('#dns_printer').val() == null || $('#dns_printer').val() == '')){
                data.append('nama_printer', '');
                data.append('dns_printer', '');
            }else{
                console.log(1);
                cekPrinter = true;
            }

            for(var a = 2; a <= 4; a++){
                if($('#nama_printer'+a).val() != null && $('#nama_printer'+a).val() != '' && $('#dns_printer'+a).val() != null && $('#dns_printer'+a).val() != ''){
                    data.append('nama_printer'+a, $('[name="nama_printer'+a+'"]').val());
                    data.append('dns_printer'+a, $('[name="dns_printer'+a+'"]').val());
                }else if(($('#nama_printer'+a).val() == null || $('#nama_printer'+a).val() == '') && ($('#dns_printer'+a).val() == null || $('#dns_printer'+a).val() == '')){
                    data.append('nama_printer'+a, '');
                    data.append('dns_printer'+a, '');
                }else{
                    console.log(a);
                    cekPrinter = true;
                }
            }

            data.append('alamat', $('[name="alamat"]').val());
            data.append('npwp', $('[name="npwp"]').val());
            data.append('footer_po', $('[name="footer_po"]').val());

            if($('#logo').val() != null && $('#logo').val() != ''){
                var logo = $('#logo')[0].files;
                data.append('logo', logo[0]);
            }

            if($('#favicon').val() != null && $('#favicon').val() != ''){
                var favicon = $('#favicon')[0].files;
                data.append('favicon', favicon[0]);
            }

            if(cekPrinter == false){
                if (stat == "add") {
                    uploads(URLs+"/add", data, rSends);
                }else{
                    data.append('id', IDs);
                    uploads(URLs+"/update", data, rSends);
                }
            }else{
                swal('Perhatian', 'Pastikan Jika Sudah Mengisi Salah Satu Nama atau DNS Printer, Wajib Melengkapi Kolom Nama atau DNSnya', 'info');
            }
        }
    });

    function readData(id){
        // stat = "update";
        // IDs = id;
        // var data = {
        //     act: "read",
        //     id: id,
        //     _token: "{{ csrf_token() }}"
        // };
        // reads(URLs+"/read", data, rReads);

        window.location.href = URLs+"/"+id+"/edit";
    }

    function rReads(data) {
        swal.close();
        $('#modalKonfigurasi').modal("show");
        $.each(data, function (idx, vals) {
            if(idx != 'logo' && idx != 'favicon'){
                if(idx == 'alamat'){
                    $('[name='+idx+']').html(vals);
                }else{
                    $('[name='+idx+']').val(vals);
                }
            }
        })
    }

    function hapusData(id){
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function(){
            var data = {act: "delete", id: id, _token:'{{ csrf_token() }}'};
            sendJson(URLs+"/delete", data, rSends);
        }).catch(swal.noop);
    }

    $('#modalKonfigurasi').on('hidden.bs.modal', function(e){
        $('#form_konfigurasi input, #form_konfigurasi file').val('');
        $('#form_konfigurasi textarea').html('');
        IDs = '';
        stat = '';
    });

    function syncSetup(){
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin melakukan sinkronisasi setup ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function(){
            sendJson('/sync/setup', {_token:'{{ csrf_token() }}'}, function(data){
                swal({
                    title: data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info"),
                    text: data.response,
                    type: data.type,
                    confirmButtonText: "OK"
                }).then(function(){
                    if (data.type == "success") {
                        datatable.ajax.reload();
                    }
                })
            });
        })
    }
  </script>
@endpush