@extends('layouts.master')

@section('styles')
    <style>
        .card-body label {
            font-size: 13px;
            color: #6c757d;
        }

        .card-body .form-control,
        .card-body .form-select {
            font-size: 14px;
        }

        #search-button {
            font-weight: 600;
            letter-spacing: .3px;
        }
        .table-garis, .garis {
            border: 0.1px solid black; /* Sets a 1px solid black border */
            border-collapse: collapse;
        }

        .text-label {
            color: #000000;
        }
/*
        .table-selectable tbody tr {
            cursor: pointer;
            transition: 0.15s;
        }

        .table-selectable tbody tr:hover {
            background-color: #f2f6ff;
        }

        .table-selectable tbody tr.selected {
            background-color: #0d6efd !important;
            color: #fff;
        }

        .table-selectable tbody tr.selected td {
            color: #fff !important;
        } */
    </style>
@endsection

@section('content')
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-2">
                    </div>
                    <div class="col-12 col-md-8 grid-margin justify-content-center stretch-card">
                        <div class="card">
                            <div class="card-body">
                            <h4 class="card-title">Daftar Pintu/Pos</h4>
                            <div class="table-responsive mb-2">
                                <table class="table table-bordered table-selectable" id="example" data-url="{{ route('getMember') }}">
                                    <thead>
                                        <tr>
                                            <th class="p-3" width="5%">No.</th>
                                            <th style="text-align: center;">Nama Pintu</th>
                                            <th style="text-align: center;">Mode Pintu</th>
                                            <th style="text-align: center;">Grace Periode</th>
                                            <th style="text-align: center;">Manless?</th>
                                            <th style="text-align: center;">Pengaturan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($Gate as $pintu)
                                            @php
                                                if ($pintu->jenis === 0 ) {
                                                    $jenis = 'Masuk';
                                                } elseif ($pintu->jenis === 1) {
                                                    $jenis = 'Keluar';
                                                }

                                                $isManless = $pintu->manless === 1
                                                ? '<span class="d-inline-block rounded-circle bg-success" style="width:12px;height:12px;"></span>'
                                                : '<span class="d-inline-block rounded-circle bg-danger" style="width:12px;height:12px;"></span>';
                                            @endphp
                                            <tr>
                                                <td class="text-center">{{ $loop->iteration }}</td>
                                                {{-- <td class="text-center" width="7%">{{ $pintu->id }}</td> --}}
                                                <td>{{ $pintu->nama }} <strong> - ({{ $pintu->id }})</strong></td>
                                                <td width="10%">{{
                                                        match($pintu->jenis) {
                                                            0 => 'Masuk',
                                                            1 => 'Keluar',
                                                            2 => 'Transit',
                                                            3 => 'Emergency',
                                                            default => '-'
                                                        }
                                                    }}</td>
                                                <td class="text-center" width="7%"><span class="d-inline-block rounded-circle
                                                        {{ $pintu->grace_period === 1 ? 'bg-success' : 'bg-danger' }}"
                                                        style="width:12px;height:12px;">
                                                    </span></td>
                                                <td class="text-center" width="7%"><span class="d-inline-block rounded-circle
                                                        {{ $pintu->manless === 1 ? 'bg-success' : 'bg-danger' }}"
                                                        style="width:12px;height:12px;">
                                                    </span>
                                                </td>
                                                <td class="text-center" width="12%">
                                                    <a class="btn btn-warning btn-sm parameter-button" id="parameter" data-bs-toggle="modal" data-bs-target=".bd-ubah-modal-lg">Pos</a>
                                                    <button class="btn btn-primary btn-sm hardware-button" data-id="{{ $pintu->id }}" data-nama="{{ $pintu->nama }}">Hardware</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex justify-content-center align-items-center mt-2">
                                <div>
                                    <button class="btn btn-primary btn-sm add-button" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Tambah</button>
                                    <button class="btn btn-warning btn-sm edit-button" id="btnEdit" data-bs-toggle="modal" data-bs-target=".bd-ubah-modal-lg">Ubah</button>
                                    <button class="btn btn-danger btn-sm" id="btnDelete">Hapus</button>
                                    <button class="btn btn-danger btn-sm" id="btnDelete">Detail</button>
                                </div>
                            </div>
                                <!-- ADD MEMMBER MODAL -->
                                    {{-- @include('stiker.tambah-stiker')
                                    @include('stiker.ubah-stiker') --}}
                                <!-- END MEMMBER MODAL -->
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
<!--********* Scripts *********-->
    <!-- Datatable -->
    <!--********* Scripts *********-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/3.0.7/metisMenu.min.js"></script>
    <script src="{{asset ('vendor/moment/moment.min.js') }}"></script>
    <script src="{{asset ('vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
	<script src="{{asset ('vendor/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>
    <script src="{{asset ('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
    <script src="{{asset ('js/custom.min.js') }}"></script>
	<script src="{{asset ('js/dlabnav-init.js') }}"></script>
    <script src="{{asset ('js/member/index.js') }}"></script>
    <script src="{{asset ('js/member/member-register.js') }}"></script>
    <script>
        $(document).ready(function () {

            $(document).on('click', '.hardware-button', function () {
                let btn = $(this);
                let btnHtml = btn.html();
                let row = $(this).closest('tr');

                // kalau sudah ada baris edit, hapus dulu
                $('.edit-row').remove();

                let id   = $(this).data('id');
                let nama = $(this).data('nama');

                // # base url tanpa parameter biar tidak dobel slash
                let baseUrl = "{{ url('setup/master/gate-hardware') }}";

                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memuat...');

                $.ajax({
                    url: baseUrl + "/" + id,
                    type: 'GET',
                    success: function (r) {
                        r = r || {};
                        console.log(r);

                        let colSpan = row.children('td').length;

                        // # daftar field yang ditampilkan (key database + label)
                        let fields = [
                            ['printer1_avail', 'Printer Status'],
                            ['printer1_conn', 'Printer Connection'],
                            ['printer1_spd', 'Printer Speed/Baudrate'],
                            ['printer1_dummy', 'Jarak Potong Kertas'],
                            ['video1_avail', 'Kamera Status'],
                            ['video1_conn', 'Kamera URL/Path'],
                            ['sound_avail', 'Sound Status'],
                            ['bg_avail', 'BGate Status'],
                            ['bg_conn', 'BGate Connection'],
                            ['bank_reader_avail', 'Reader BANK Status'],
                            ['bank_reader_comm', 'Reader BANK Connection'],
                            ['bank_reader_key', 'Reader BANK Key/Parameter'],
                            ['smartcard_avail', 'Smartcard Status'],
                            ['smartcard_speed', 'Smartcard Speed/Baudrate'],
                            ['smartcard_port', 'Smartcard Port'],
                        ];

                        let cards = '';

                        for (let i = 0; i < fields.length; i ++) {

                            let f1 = fields[i];
                            let val = r[f1[0]] ?? '';

                            cards += `
                                <div class="col-12 col-sm-6 col-lg-3 mb-2">
                                    <div class="border rounded p-2 h-100">
                                        <div class="fw-semibold text-muted text-label mb-1"><strong>${f1[1]}</strong></div>
                                        <div>
                                            <span class="view-mode">${formatValue(f1[0], r[f1[0]])}</span>
                                            <input type="text"
                                                class="form-control form-control-sm edit-mode d-none"
                                                data-key="${f1[0]}"
                                                data-orig="${esc(val)}"
                                                value="${esc(val)}">
                                        </div>
                                    </div>
                                </div>
                            `;
                        }

                        let editHtml = `
                        <tr class="edit-row" data-id="${id}">
                            <td colspan="${colSpan}">
                                <div class="card shadow-sm">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <strong>Hardware Configuration - ${esc(nama)} (${esc(id)})</strong>
                                        <div>
                                            <button class="btn btn-sm btn-primary btn-edit">Edit</button>
                                            <button class="btn btn-sm btn-success btn-save d-none">Save</button>
                                            <button class="btn btn-sm btn-secondary btn-cancel d-none">Cancel</button>
                                        </div>
                                    </div>
                                    <div class="card-body p-2">
                                        <div class="row">
                                            ${cards}
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        `;

                        row.after(editHtml);
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                        Swal.fire({icon: 'error', title: 'Gagal memuat hardware', text: xhr.responseJSON?.message || 'Cek koneksi / hubungi admin.'});
                    },
                    complete: function () {
                        btn.prop('disabled', false).html(btnHtml);
                    }
                });
            });

            // MODE EDIT
            $(document).on('click', '.btn-edit', function () {

                $('.view-mode').addClass('d-none');
                $('.edit-mode').removeClass('d-none');

                $('.btn-edit').addClass('d-none');
                $('.btn-save, .btn-cancel').removeClass('d-none');
            });

            // CANCEL
            $(document).on('click', '.btn-cancel', function () {

                // # kembalikan isian ke nilai semula
                $('.edit-mode').each(function () {
                    $(this).val($(this).data('orig') ?? '');
                });

                $('.edit-mode').addClass('d-none');
                $('.view-mode').removeClass('d-none');

                $('.btn-save, .btn-cancel').addClass('d-none');
                $('.btn-edit').removeClass('d-none');
            });

            // SAVE
            $(document).on('click', '.btn-save', function () {
                const btn = $(this);
                const origHtml = btn.html();

                let dataToSend = {};
                let gateId = $('.edit-row').data('id');

                $('.edit-mode').each(function () {
                    let key = $(this).data('key');
                    dataToSend[key] = $(this).val();
                });

                console.log(dataToSend);

                // # base url tanpa parameter biar tidak dobel slash
                let baseUrl = "{{ url('setup/master/gate-hardware') }}";

                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');

                $.ajax({
                    url: baseUrl + "/" + gateId,
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "PUT",
                        data: dataToSend
                    },
                    success: function (res) {

                        // # tampilkan ulang nilai yang baru disimpan
                        $('.edit-mode').each(function () {
                            let key = $(this).data('key');
                            let val = $(this).val();
                            $(this).data('orig', val);
                            $(this).siblings('.view-mode').html(formatValue(key, val));
                        });

                        $('.btn-cancel').click();
                        Swal.fire({icon: 'success', title: 'Berhasil', text: 'Konfigurasi hardware tersimpan.'});
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                        Swal.fire({icon: 'error', title: 'Gagal menyimpan', text: xhr.responseJSON?.message || 'Cek koneksi / hubungi admin.'});
                    },
                    complete: function () {
                        btn.prop('disabled', false).html(origHtml);
                    }
                });
            });

            // # amankan teks biar tanda kutip tidak merusak HTML
            function esc(value) {
                if (value === null || value === undefined) return '';
                return String(value)
                    .replace(/&/g, '&amp;')
                    .replace(/"/g, '&quot;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;');
            }

            function formatValue(key, value) {

                // kalau field *_avail kita kasih badge
                if (key.includes('_avail')) {

                    if (value == 1) {
                        return `<span class="badge rounded-pill bg-success px-3">ON</span>`;
                    } else {
                        return `<span class="badge rounded-pill bg-danger px-3">OFF</span>`;
                    }
                }

                // default
                if (value === null || value === undefined || value === '') {
                    return '-';
                }
                return esc(value);
            }
        });

    </script>
@endsection