@extends('layouts.authorized')
@inject('constant', '\App\Util\Constant')
@section('title', 'Daftar Terduga Terorisme dan Organisasi Terorisme (DTTOT)')

@section('headerCustom')
    @php
        $title = 'Daftar Terduga Terorisme dan Organisasi Terorisme (DTTOT)';
        $urlPrefix = strtolower(str_replace("/", "", Request::route()->getPrefix()));
    @endphp
@endsection

@section('cssCustom')
    <style>
        .toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            z-index: 9999;
        }

        .toast-message {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 5px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .toast-message.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-xs-12">

            @include('cms.form.errorbox')

            <ul id="listOrderStatus" class="nav nav-tabs">
                <li @if (empty($status) && empty($flag)) class="active" @endif>
                    <a href="{{ route('admin.dttots') }}">
                        Semua
                    </a>
                </li>
                @foreach ($constant::DTTOT_STATUS_LABELS as $key => $label)
                <li @if (!empty($status) && $status == $key) class="active" @endif>
                    <a href="{{ route('admin.dttots', ['status' => $key]) }}">
                        {{ $label }}
                    </a>
                </li>
                @endforeach
            </ul>
            <div class="card">
                <div class="card-header" style="display: flex; flex-flow: row wrap; gap: 10px; justify-content: space-between; align-items: center;">
                    <span>{{ $title }}</span>

                    <div>
                        <button type="button" class="btn btn-warning btn-xs mb-0" id="addBtn"><i class="fa fa-plus"></i>&nbsp; Tambah Data</button>
                        <button type="button" class="btn btn-success btn-xs mb-0" data-toggle="modal" data-target="#modal-upload-csv"><i class="fa fa-file-text-o"></i>&nbsp; Upload CSV</button>
                    </div>
                </div>
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route($urlPrefix.'.dttotData', ['status' => $status]))
                    <thead>
                        <tr>
                        <th data-column-name="id" data-sortable="false" style="min-width: 150px !important;">Action</th>
                        <th data-column-name="densus_code" data-sortable="true" style="min-width: 100px !important;">Kode Densus</th>
                        <th data-column-name="real_name" data-sortable="true" style="min-width: 250px !important;">Nama</th>
                        <th data-column-name="alias" data-sortable="true" style="min-width: 250px !important; text-align: left !important;">Alias</th>
                        <th data-column-name="id_card_number" data-sortable="true" style="min-width: 200px !important;">Nomor Identitas</th>
                        <th data-column-name="nationality" data-sortable="true">Kewarganegaraan</th>
                        <th data-column-name="presumed" data-sortable="true">Terduga</th>
                        <th data-column-name="birth_place" data-sortable="true" style="min-width: 100px !important;">Tempat Lahir</th>
                        <th data-column-name="birth_date" data-sortable="true" style="min-width: 200px !important;">Tanggal Lahir</th>
                        <th data-column-name="address" data-sortable="true" style="min-width: 350px !important;">Alamat</th>
                        <th data-column-name="description" data-sortable="true" style="min-width: 200px !important; text-align: left;">Deskripsi</th>
                        <th data-column-name="status" data-sortable="true" style="min-width: 100px !important;">Status</th>
                        <th data-column-name="createdAt" data-sortable="true" style="min-width: 150px !important;">Ditambahkan pada</th>
                        <th data-column-name="updatedAt" data-sortable="true" style="min-width: 150px !important;">Diperbarui pada</th>
                    </tr>
                    </thead>
                    @endtableajax
                </div>
            </div>
        </div>
    </div>

    <div id="modal-upload-csv" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header p-15">
                    Upload CSV
                </div>
                <form id="upload-csv-form" action="{{ route('admin.import.csv', 'dttot') }}" method="post" enctype="multipart/form-data">
                    <div class="modal-body p-15">
                        <div class="row">
                            <div class="col-md-12">
                                {{ csrf_field() }}
                                
                                <div class="alert alert-info">
                                    Mohon untuk diperhatikan format file yang dipilih, pastikan format yang dipilih benar berformat .csv
                                </div>
                                <div class="w-100">
                                    <div style="display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: 10px;">
                                        <div class="form-group" style="display: flex; align-items: center; gap: 10px;">
                                            <label for="delimiter">Delimiter</label>
                                            <select class="form-control w-100" name="delimiter" id="delimiter" value=",">
                                                <option value=";">;</option>
                                                <option value=",">,</option>
                                            </select>
                                        </div>

                                        <div class="custom-file">
                                            <input type="file" style="display: none;" name="csv_file" class="custom-file-input" id="customFile">
                                            <label class="custom-file-label btn" style="border: 1px solid black;" for="customFile">Browse File CSV</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Batal
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fa fa-upload"></i>
                            <span class="help-text">Upload</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modal-dttot-form" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header p-15" id="modalDTTOTFormTitle"></div>
                <form id="dttotForm">
                    <div class="modal-body p-15">
                        <div class="row">
                            <div class="col-md-12">
                                {{ csrf_field() }}

                                <input type="hidden" name="id" id="id" value="">

                                <div id="validation-errors" class="alert alert-danger alert-dismissible" role="alert" style="z-index: 200001 !important;"></div>
                                
                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="real_name" class="form-label">Nama Asli <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="real_name"
                                        id="real_name">
                                </div>

                                <div class="alert alert-info">
                                    <small>Jika alias lebih dari 1, maka penulisan alias dipisah dengan koma. Contoh : Fulan, Fulana, Fulani</small>
                                </div>
                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="alias" class="form-label">Alias</label>
                                    <textarea class="form-control" name="alias"
                                        id="alias"></textarea>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group" style="margin-bottom: 20px;">
                                            <label for="id_card_number" class="form-label">Nomor Identitas / NIK</label>
                                            <input type="text" class="form-control" name="id_card_number"
                                                id="id_card_number">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group" style="margin-bottom: 20px;">
                                            <label for="densus_code" class="form-label">Kode Densus <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="densus_code"
                                                id="densus_code">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group" style="margin-bottom: 20px;">
                                            <label for="nationality" class="form-label">Kewarganegaraan</label>
                                            <input type="text" class="form-control" name="nationality"
                                                id="nationality">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group" style="margin-bottom: 20px;">
                                            <label for="presumed" class="form-label">Terduga <span class="text-danger">*</span></label>
                                            <div style="display: flex; flex-flow: row wrap; gap: 30px; align-items: center;">
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="presumed1" name="presumed" class="custom-control-input" value="Orang">
                                                    <label class="custom-control-label" for="presumed1">Orang</label>
                                                </div>
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="presumed2" name="presumed" class="custom-control-input" value="Korporasi">
                                                    <label class="custom-control-label" for="presumed2">Korporasi</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group" style="margin-bottom: 20px;">
                                            <label for="birth_place" class="form-label">Tempat Lahir</label>
                                            <input type="text" class="form-control" name="birth_place"
                                                id="birth_place">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group" style="margin-bottom: 20px;">
                                            <label for="birth_date" class="form-label">Tanggal Lahir</label>
                                            <input type="text" class="form-control" name="birth_date"
                                                id="birth_date">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="address" class="form-label">Alamat</label>
                                    <textarea class="form-control" name="address"
                                        id="address"></textarea>
                                </div>

                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="description" class="form-label">Deskripsi</label>
                                    <textarea class="form-control" name="description"
                                        id="description"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Batal
                    </button>
                    <button type="button" id="saveBtn" class="btn btn-success">
                        <i class="fa fa-check"></i>&nbsp; Simpan
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('jsCustom')
    <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
    <script>
        const baseUrl = window.location.origin;

        $(document).ready(function () {
            bsCustomFileInput.init()
        })

        function refreshDataTable() {
            dataTableList[0].clear().draw();
        }

        function customColumns() {
            return {
                3: function(data, type, row, meta) {
                    var splitString = data.split(',');
    
                    var html = '<div style="text-align: left; display: flex; gap: 10px; flex-flow: row wrap; width: 100%; max-height: 100px !important; overflow-y: auto;">';
    
                    splitString.map((string) => {
                        if (string) {
                            // html += `<div style="border: 1px solid black; border-radius: 5px; padding: 5px; width: 100%;">${string}</div>`; 
                            html += `<div class="badge badge-default">${string}</div>`; 
                        }
                    })
    
                    html += '</div>';
    
                    return html;
                },
                10: function(data, type, row, meta) {
                    var html = '<div style="text-align: left; display: block; width: 100%; max-height: 100px !important; overflow-y: auto;">';
                    html += data;
                    html += '</div>';
    
                    return html;
                }
            }
        }

        function showDTTOTFormModal(id = "") {
            showToast('Sedang memuat form');

            $('#validation-errors').hide();
            $('#dttotForm')[0].reset();
            $('#id').val(null);

            if (id !== "") {
                getDTTOTData(id, function(data) {
                    $('#id').val(data.id);
                    $('#real_name').val(data.real_name);
                    $('#alias').val(data.alias);
                    $('#id_card_number').val(data.id_card_number);
                    $('#nationality').val(data.nationality);
                    $('#densus_code').val(data.densus_code);
                    $('#birth_place').val(data.birth_place);
                    $('#birth_date').val(data.birth_date);
                    $('#address').val(data.address);
                    $('#description').val(data.description);
                    $('input:radio[name=presumed][value=' + data.presumed + ']').prop('checked', true);
                });
            }

            $('#modal-dttot-form').modal('show');
        }

        function getDTTOTData(id, callback) {
            const url = `${baseUrl}/admin/dttot/${id}`;

            $.ajax({
                type: "GET",
                url: url,
                success: function(response) {
                    const {
                        data
                    } = response;
                    callback(data);
                },
                error: function() {
                    console.error('Error fetching DTTOT data');
                }
            });
        }
        
        $(document).on('click', '#addBtn', function() {
            showDTTOTFormModal();
            $('#modalDTTOTFormTitle').text('Form Tambah Data DTTOT');
        })

        $(document).on('click', '.editBtn', function(e) {
            e.preventDefault();

            const id = $(this).data('id');
            showDTTOTFormModal(id);
            $('#modalDTTOTFormTitle').text('Form Edit Data DTTOT');
        });

        $('#saveBtn').on('click', function(e) {
            e.preventDefault();

            const formData = $('#dttotForm').serialize();
            const url =
                `${baseUrl}/admin/dttot`;

            $.ajax({
                type: "POST",
                url: url,
                data: formData,
                dataType: "json",
                success: function(response) {
                    $('#modal-dttot-form').modal('hide');
                    $('#dttotForm')[0].reset();
                    $('#validation-errors').empty();

                    refreshDataTable();
                    return swal('Success', response.message, 'success');
                },
                error: function(xhr, status, error) {
                    let errorMessage = 'An error occurred';

                    $('#validation-errors').empty();

                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(key, errors) {
                            $('#validation-errors').show();
                            $('#validation-errors').append(`
                                <li>
                                    ${errors.join(', ')}
                                </li>
                            `);
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                        return swal('Error', errorMessage, 'error');
                    } else if (xhr.responseText) {
                        try {
                            let parsedResponse = JSON.parse(xhr.responseText);
                            if (parsedResponse.message) {
                                errorMessage = parsedResponse.message;
                            }
                        } catch (e) {
                            errorMessage = xhr.responseText;
                        }
                        return swal('Error', errorMessage, 'error');
                    }
                }
            });
        });

        function showToast(message) {
            var $toastContainer = $('.toast-container');

            if ($toastContainer.length === 0) {
                $toastContainer = $('<div class="toast-container"></div>');
                $('body').append($toastContainer);
            }

            var $toastMessage = $('<div class="toast-message"></div>').text(message);
            $toastContainer.append($toastMessage);

            setTimeout(function() {
                $toastMessage.addClass('show');
            }, 100);

            setTimeout(function() {
                $toastMessage.removeClass('show');
                setTimeout(function() {
                    $toastMessage.remove();
                }, 400);
            }, 3000);
        }
    </script>
@endsection