@extends('layouts.authorized')
@inject('constant', '\App\Util\Constant')
@section('title', 'Daftar Payor')

@section('headerCustom')
    @php
        $title = 'Daftar Payor';
        $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')

            <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.'.payorData'))
                    <thead>
                        <tr>
                        <th data-column-name="id" data-sortable="false" style="min-width: 130px !important;">Action</th>
                        <th data-column-name="payor_code" data-sortable="true" style="min-width: 50px !important;">Kode Payor</th>
                        <th data-column-name="payor_name" data-sortable="true" style="min-width: 250px !important;">Nama Payor</th>
                        <th data-column-name="payor_founded_year" data-sortable="true" style="min-width: 60px !important;">Tahun Berdiri</th>
                        <th data-column-name="payor_industry" data-sortable="true" style="min-width: 100px !important;">Industri</th>
                        <th data-column-name="payor_domicile" data-sortable="true" style="min-width: 100px !important;">Domisili</th>
                        <th data-column-name="payor_desc" data-sortable="true" style="min-width: 250px !important; text-align: left;">Deskripsi</th>
                        <th data-column-name="createdAt" data-sortable="true" style="min-width: 80px !important;">Ditambahkan pada</th>
                        <th data-column-name="updatedAt" data-sortable="true" style="min-width: 80px !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', 'payor') }}" 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-payor-form" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header p-15" id="modalPayorFormTitle"></div>
                <form id="payorForm">
                    <div class="modal-body p-15">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    Input bertanda <span class="text-danger">*</span> wajib diisi.
                                </div>
                            </div>
                            <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="payor_name" class="form-label">Nama Payor <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="payor_name"
                                        id="payor_name" required>
                                </div>

                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="payor_code" class="form-label">Kode Payor <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="payor_code"
                                        id="payor_code" required>
                                </div>
                                
                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="payor_founded_year" class="form-label">Tahun Berdiri</label>
                                    <input type="number" class="form-control" name="payor_founded_year"
                                        id="payor_founded_year" min="1900" max="{{ date('Y') }}">
                                </div>

                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="payor_industry" class="form-label">Industri</label>
                                    <input type="text" class="form-control" name="payor_industry"
                                        id="payor_industry">
                                </div>
                                
                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="payor_domicile" class="form-label">Domisili</label>
                                    <input type="text" class="form-control" name="payor_domicile"
                                        id="payor_domicile">
                                </div>
                                
                                <div class="form-group" style="margin-bottom: 20px;">
                                    <label for="payor_desc" class="form-label">Deskripsi</label>
                                    <textarea class="form-control" name="payor_desc"
                                        id="payor_desc"></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 {
                // 0: function(data, type, row, meta) {
                //     var html = "<div style='display: flex; flex-flow: row wrap; gap: 5px;'>";
                //     html += `<button type='button' class='btn btn-xs btn-warning editBtn' data-id='${data}'><i class='fa fa-edit'></i>&nbsp; Edit</button>`;

                //     html += `<form method="post" action="{{ route('admin.payor.delete') }}">
                //                 {{ csrf_field() }}
                //                 {{ method_field("DELETE") }}
                //                 <input type="hidden" name="id" value="${data}"/>
                //                 <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Yakin untuk menghapus data ini?');"><i class="fa fa-trash"></i>&nbsp; Hapus</button>
                //             </form>
                //             `;

                //     html += "</div>";
                //     return html;
                // },
                6: 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 showPayorFormModal(id = "") {
            showToast('Sedang memuat form');

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

            if (id !== "") {
                getPayorData(id, function(data) {
                    $('#id').val(data.id);
                    $('#payor_name').val(data.payor_name);
                    $('#payor_code').val(data.payor_code);
                    $('#payor_desc').val(data.payor_desc);
                });
            }

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

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

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

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

            const id = $(this).data('id');
            showPayorFormModal(id);
            $('#modalPayorFormTitle').text('Form Edit Data Payor');
        });

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

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

            $.ajax({
                type: "POST",
                url: url,
                data: formData,
                dataType: "json",
                success: function(response) {
                    $('#modal-payor-form').modal('hide');
                    $('#payorForm')[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