@extends('layouts.base')

@section('content-header')
    <div class="col-12">
        <div class="container" style="display: contents">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h3 class="m-0"> Master Data</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Admin</a></li>
                        <li class="breadcrumb-item active">Printer</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="col-lg-12 col-md-12 col-sm-12 mt-2">
        <div class="container" style="display: contents">
            <div class="card">
                <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
                <div class="card-header mt-0 pt-0">
                    <div class="d-flex">
                        <h4>Daftar Printer</h4>
                        <!-- Button trigger modal -->
                        <div class="ml-auto">
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                data-target="#modal-default-add">
                                Tambah Printer
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {{-- <h5 class="card-title">Form List Data</h5> --}}
                    <div class="table-responsive mt-3">
                        <table id="tabelku" class="table table-hover display" style="width: 100%">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th>Nama Printer</th>
                                    <th>Ukuran Kertas</th>
                                    <th>Penempatan printer</th>
                                    <th>Koneksi printer</th>
                                    <th>Status</th>
                                    <th class="text-center"><i class="fas fa-cog"></i></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Menu -->
    <div class="modal fade" id="modal-default-add">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tambah Printer</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-tambah-printer" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="printer-nama" class="col-form-label">Nama Printer:</label>
                                <input type="text" class="form-control" id="printer-nama" name="printer_nama" required>
                            </div>
                            <div class="col-md-6">
                                <label for="printer-mm" class="col-form-label">Ukuran Kertas:</label>
                                <select class="custom-select" data-placeholder="Pilih ukuran kertas printer" id="printer-mm"
                                    required name="printer_mm" style="width: 100%;">
                                    <option value="80">80mm</option>
                                    <option value="58">58mm</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="printer-untuk-text" class="col-form-label">Penempatan Printer:</label>
                                <div class="form-group select2-primary">
                                    <select class="custom-select" data-placeholder="Pilih penempatan printer" required
                                        name="printer_for" style="width: 100%;">
                                        <option value="kasir">Kasir</option>
                                        <option value="dapur">Dapur</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="printer-status_edit" class="col-form-label">Printer Status:
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <div class="row" style="align-items:center">
                                    &nbsp;&nbsp;&nbsp;
                                    <span for="aktif">Tidak Aktif</span>
                                    &nbsp;&nbsp;&nbsp;
                                    <input class="switch" type="checkbox" id="printer-status" name="printer_status" checked>
                                    &nbsp;&nbsp;&nbsp;
                                    <span for="aktif">Aktif</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="printer-connection" class="col-form-label">Koneksi Printer:</label>
                                <select class="custom-select" id="printer-connection"
                                    data-placeholder="Pilih koneksi printer" required name="printer_connection"
                                    style="width: 100%;">
                                    <option value="wired">Wired/Usb</option>
                                    <option value="wireless">Wireless/Wifi</option>
                                </select>
                            </div>
                            <div class="col-md-6" style="display:none" id="alamat_ipnya">
                                <label for="ip-address" class="col-form-label">Alamat ip:</label>
                                <input type="text" class="form-control" id="ip-address" name="ip_address">
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-tambah">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-edit">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Printer</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-edit-printer" method="put" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="printer-nama_edit" class="col-form-label">Nama Printer:</label>
                                <input type="text" class="form-control" id="printer-nama_edit"
                                    name="printer_nama_edit" required>
                            </div>
                            <div class="col-md-6">
                                <label for="printer-mm_edit" class="col-form-label">Ukuran Kertas:</label>
                                <select class="custom-select" data-placeholder="Pilih ukuran kertas printer"
                                    id="printer-mm_edit" required name="printer_mm_edit" style="width: 100%;">
                                    <option value="80">80mm</option>
                                    <option value="58">58mm</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="printer-untuk-text_edit" class="col-form-label">Penempatan Printer:</label>
                                <div class="form-group select2-primary">
                                    <select class="custom-select" data-placeholder="Pilih penempatan printer" required
                                        name="printer_for_edit" style="width: 100%;">
                                        <option value="kasir">Kasir</option>
                                        <option value="dapur">Dapur</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="printer-status_edit" class="col-form-label">Printer Status:
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <div class="row" style="align-items:center">
                                    &nbsp;&nbsp;&nbsp;
                                    <span for="aktif">Tidak Aktif</span>
                                    &nbsp;&nbsp;&nbsp;
                                    <input class="switch" type="checkbox" id="printer-status_edit"
                                        name="printer_status_edit" checked>
                                    &nbsp;&nbsp;&nbsp;
                                    <span for="aktif">Aktif</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="printer-connection_edit" class="col-form-label">Koneksi Printer:</label>
                                <select class="custom-select" id="printer-connection_edit"
                                    data-placeholder="Pilih koneksi printer" required name="printer_connection_edit"
                                    style="width: 100%;">
                                    <option value="wired">Wired/Usb</option>
                                    <option value="wireless">Wireless/Wifi</option>
                                </select>
                            </div>
                            <div class="col-md-6" style="display:none" id="alamat_ipnya_edit">
                                <label for="ip-address_edit" class="col-form-label">Alamat ip:</label>
                                <input type="text" class="form-control" id="ip-address_edit" name="ip_address_edit"
                                    required>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-tambah">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-hapus">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Hapus Printer</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="title-terhapus">&hellip;</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger button-hapus">Hapus</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <!-- Toastr -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">

    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">

    {{-- <style>
        .toggle-button-cover {
            display: table-cell;
            position: relative;
            width: 200px;
            height: 140px;
            box-sizing: border-box;
        }

        .button-cover {
            height: 100px;
            margin: 20px;
            background-color: #fff;
            box-shadow: 0 10px 20px -8px #c5d6d6;
            border-radius: 4px;
        }

        .button-cover:before {
            counter-increment: button-counter;
            content: counter(button-counter);
            position: absolute;
            right: 0;
            bottom: 0;
            color: #d7e3e3;
            font-size: 12px;
            line-height: 1;
            padding: 5px;
        }

        .button-cover,
        .knobs,
        .layer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .button {
            position: relative;
            top: 50%;
            width: 74px;
            height: 36px;
            margin: -20px auto 0 auto;
            overflow: hidden;
        }

        .button.r,
        .button.r .layer {
            border-radius: 100px;
        }

        .button.b2 {
            border-radius: 2px;
        }

        .checkbox {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 3;
        }

        .knobs {
            z-index: 2;
        }

        .layer {
            width: 100%;
            background-color: #ebf7fc;
            transition: 0.3s ease all;
            z-index: 1;
        }

        /* Button 10 */
        #button-10 .knobs:before,
        #button-10 .knobs:after,
        #button-10 .knobs span {
            position: absolute;
            top: 4px;
            width: 30px;
            height: 28px;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            line-height: 1;
            padding: 9px 4px;
            border-radius: 2px;
            transition: 0.3s ease all;
        }

        #button-10 .knobs:before {
            content: "";
            left: 4px;
            background-color: #03a9f4;
        }

        #button-10 .knobs:after {
            content: "OFF";
            right: 4px;
            color: #4e4e4e;
        }

        #button-10 .knobs span {
            display: inline-block;
            left: 4px;
            color: #fff;
            z-index: 1;
        }

        #button-10 .checkbox:checked+.knobs span {
            color: #4e4e4e;
        }

        #button-10 .checkbox:checked+.knobs:before {
            left: 42px;
            background-color: #f44336;
        }

        #button-10 .checkbox:checked+.knobs:after {
            color: #fff;
        }

        #button-10 .checkbox:checked~.layer {
            background-color: #fcebeb;
        }

        /* Button 1 */
        #button-1 .knobs:before {
            content: "YES";
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 10px;
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            line-height: 1;
            padding: 9px 4px;
            background-color: #03a9f4;
            border-radius: 50%;
            transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
        }

        #button-1 .checkbox:checked+.knobs:before {
            content: "NO";
            left: 42px;
            background-color: #f44336;
        }

        #button-1 .checkbox:checked~.layer {
            background-color: #fcebeb;
        }

        #button-1 .knobs,
        #button-1 .knobs:before,
        #button-1 .layer {
            transition: 0.3s ease all;
        }
    </style> --}}

    <style>
        input.switch {
            -moz-appearance: none;
            -webkit-appearance: none;
            -o-appearance: none;
            appearance: none;
            height: 1em;
            width: 2em;
            border-radius: 1em;
            box-shadow: inset -1em 0px 0px 0px rgba(192, 192, 192, 1);
            background-color: white;
            border: 1px solid rgba(192, 192, 192, 1);
            outline: none;
            -webkit-transition: 0.2s;
            transition: 0.2s;
        }

        input.switch:checked {
            box-shadow: inset 1em 0px 0px 0px rgba(33, 150, 243, 0.5);
            border: 1px solid rgba(33, 150, 243, 1);
        }
    </style>
@endpush

@push('scripts')
    <!-- Toastr -->
    <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>

    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>

    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>

    <script type="text/javascript">
        $('#printer_status_add').bootstrapSwitch('state', $('#printer_status_add').prop('checked'));

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        //Initialize Select2 Elements
        $('.select2').select2({
            dropdownParent: $("#modal-default-add")
        })
        $('.edit_select2').select2({
            dropdownParent: $("#modal-default-edit")
        })

        $(document).ready(function() {
            $('#tabelku').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('printer.getDataPrinter') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center'
                    },
                    {
                        data: 'nama_printer',
                        name: 'nama_printer'
                    },
                    {
                        data: 'printer_mm',
                        name: 'printer_mm'
                    },
                    {
                        data: 'printer_for',
                        name: 'printer_for'
                    },
                    {
                        data: 'printer_connection',
                        name: 'printer_connection',
                        render: function(data, type, row, meta) {
                            if (data == 'wired') {
                                return 'Wired/Usb'
                            } else {
                                var wireles = 'Wireless/Wifi'
                                var ipnya = wireles + ' (' + row.ip_address + ')'
                                return ipnya
                            }
                        }
                    },
                    {
                        data: 'status_printer',
                        name: 'status_printer',
                        className: 'text-center'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        className: 'text-center'
                    },
                ]
            })
        })

        $('#printer-connection').on('change', function() {
            if (this.value == 'wireless') {
                $('#alamat_ipnya').show()
                $('#ip-address').attr('required', true)
            } else {
                $('#alamat_ipnya').hide()
                $('#ip-address').attr('required', false)
            }
        })

        $('#printer-connection_edit').on('change', function() {
            if (this.value == 'wireless') {
                $('#alamat_ipnya_edit').show()
                $('#ip-address_edit').attr('required', true)
            } else {
                $('#alamat_ipnya_edit').hide()
                $('#ip-address_edit').attr('required', false)
            }
        })


        $(document).ready(function() {
            // ajax tambah printer
            $('#form-tambah-printer').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('printer.store') }}",
                    type: "POST",
                    dataType: "json",
                    data: $(this).serialize(),
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-add').modal('hide')
                        $('#form-tambah-printer')[0].reset()
                        $('.select2').val(null).trigger('change')
                        $('#konfirmasi-password-input').removeClass('is-valid')
                        $('#tabelku').DataTable().ajax.reload()
                        location.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            // ajax edit printer
            $(document).on('click', '.btn-edit-printer', function() {
                var data = JSON.parse($(this).attr('data-printer'));
                $('#printer-nama_edit').val(data.nama_printer)
                $('#printer-mm_edit').val(data.printer_mm)

                if (data.printer_for == 'kasir') {
                    $('#printer-untuk-text_edit').val('kasir').trigger('change')
                } else {
                    $('#printer-untuk-text_edit').val('dapur').trigger('change')
                }

                if (data.status == '0') {
                    $('#printer-status_edit').attr('checked', false)
                } else {
                    $('#printer-status_edit').attr('checked', true)
                }

                if (data.printer_connection == 'wired') {
                    $('#printer-connection_edit').val('wired').trigger('change')
                } else {
                    $('#printer-connection_edit').val('wireless').trigger('change')
                    $('#ip-address_edit').val(data.ip_address)
                    $('#ip-address_edit').attr('required', true)
                    $('#alamat_ipnya_edit').show()
                }

                $('#modal-default-edit').modal('show')
                $('#form-edit-printer').on('submit', function(e) {
                    // disable button submit
                    $('#simpan-form-tambah').attr('disabled', true)

                    e.preventDefault();
                    $.ajax({
                        url: "{{ url('printer/update') }}" + '/' + data.id,
                        type: "PUT",
                        dataType: "json",
                        data: $(this).serialize(),
                        cache: false,
                        async: false,
                        success: function(response) {
                            // enable button submit on interval 1 detik
                            setTimeout(function() {
                                $('#simpan-form-tambah').attr('disabled', false)
                            }, 500);
                            toastr.success(response.meta.message)
                            $('#modal-default-edit').modal('hide')
                            $('#form-edit-printer')[0].reset()
                            $('#tabelku').DataTable().ajax.reload()
                            location.reload()
                        },
                        error: function(response) {
                            // enable button submit on interval 1 detik
                            setTimeout(function() {
                                $('#simpan-form-tambah').attr('disabled', false)
                            }, 500);
                            toastr.error(response.responseJSON.meta.message)
                        }
                    })
                })
            })

            // ajax hapus printer
            $(document).on('click', '.btn-hapus-printer', function() {
                var data = JSON.parse($(this).attr('data-printer'));
                var dataAppend = '<p>Apakah anda yakin ingin menghapus printer <b>' + data.nama_printer +
                    ' ' + data.printer_mm + '</b>mm terletak di <b>' + data.printer_for + '</b> ?</p>';
                $('#title-terhapus').html(dataAppend);
                $('.button-hapus').attr('data-id', data.id);
                $('#modal-default-hapus').modal('show');
            })

            $(document).on('click', '.button-hapus', function() {
                var id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ url('printer/delete') }}" + '/' + id,
                    type: "DELETE",
                    dataType: "json",
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-hapus').modal('hide')
                        $('#tabelku').DataTable().ajax.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })
        })
    </script>
@endpush