@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            <h4 class="card-title mb-1 text-info">
                <i class="{{ $icon }}"></i> &nbsp;{{ $label }}
            </h4>
            <p class="card-description">
                Fitur untuk mengelola data {{ Str::lower($label) }}.
            </p>

            <div class="col-sm-6 col-md-4">
                <div class="form-group">
                    <label>Logo <small class="text-muted">( Jika ada )</small></label><br />
                    <img class="img-thumbnail img-default-logo"
                        src="{{ route('attachment.get', ['id' => Common::encrypt(old('logo', $entity->logo??0)), 'render' => 'entitylogo']) }}"
                        style="height: 150px;">
                    <img class="img-thumbnail img-logo" style="height: 150px;">
                    <input type="file" name="logo_file" id="logo" class="form-control" accept="image/*" />
                    <small class="text-muted">Gunakan file jpg, jpeg atau png. Ukuran file maksimal 5 MB.</small>
                </div>

            </div>

            <div class="row">
                <div class="col-sm-6">
                    <x-form.input-text label="Nama Perusahaan" :old="$entity->name" readonly />
                </div>
                <div class="col-sm-6">
                    <x-form.input-text label="Jenis Perusahaan" :old="$entity->type_name" readonly />
                </div>
                <div class="col-sm-12 col-md-6">
                    <x-form.text-area label="Alamat" data-name="address" class="input-editable" :old="$entity->address"
                        rows='4' />
                </div>
                <div class="col-sm-12 col-md-6">
                    <x-form.input-text label="Kontak" data-name="phone" class="input-editable" :old="$entity->phone" />
                </div>
                <div class="col-sm-12">
                    <x-form.select-region name='regional_id' id="regional_id"
                    data-name="regional_id" label="Kelurahan" :old="$entity->regional_id" />

                </div>
            </div>


            <hr class="mb-0" />

            <div class="table-responsive">
                <table class="table" id="table-parameter">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th width='200px'>Nilai</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($parameters as $key => $parameter)
                            <tr>
                                <td>{{ $parameter['name'] }}</td>
                                @if (in_array($key, [EntitySetup::TIMEIN, EntitySetup::TIMEOUT]))
                                    <td>
                                        <x-form.time-picker id="{{ $key }}" name="{$key}}" class="payrollsetup"
                                            data-type="{{ $key }}" :old="old($key, $parameter['value'])" />
                                    </td>
                                @else
                                    <td><x-form.select class="payrollsetup" id="{{ $key }}"
                                            data-type="{{ $key }}" :option="[
                                                1,
                                                2,
                                                3,
                                                4,
                                                5,
                                                6,
                                                7,
                                                8,
                                                9,
                                                10,
                                                11,
                                                12,
                                                13,
                                                14,
                                                15,
                                                16,
                                                17,
                                                18,
                                                19,
                                                20,
                                                21,
                                                22,
                                                23,
                                                24,
                                                25,
                                                26,
                                                27,
                                                28,
                                            ]" name="{{ $key }}"
                                            :old="old($key, $parameter['value']) - 1" /></td>
                                @endif

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('change', '.payrollsetup', function(e) {
                const data = $(this).data();
                sendData(data);
            });
            $(document).on('blur', '.payrollsetup', function(e) {
                const data = $(this).data();

                sendData(data);

            })

            $("#regional_id").change(function() {
                let val = $(this).val();
                let data = $(this).data();
                const formData = new FormData();
                formData.append(data.name, val);
                formData.append("_token", token);
                $.ajax({
                    type: "POST",
                    url: "{{ route('parameter.entity_setup.update') }}",
                    data: formData,
                    dataType: "json",
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        console.log(response);
                        if (response.status) {
                            setNotifsuccess(response.message, false);
                        } else {
                            setNotiffail(response.message);
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        ajaxError(xhr.status)
                    }
                })
            })

            $(".img-logo").hide()

            $("#logo").change(function() {
                var oFReader = new FileReader()
                var div = $(this).closest("div")

                const formData = new FormData();
                const logo = document.querySelector("#logo");
                formData.append("logo", logo.files[0]);
                formData.append("_token", token);
                $.ajax({
                    url: "{{ route('parameter.entity_setup.update') }}",
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(response) {
                        console.log(response);
                        if (response.status) {
                            setNotifsuccess(response.message, false);
                            oFReader.readAsDataURL(document.getElementById("logo").files[0])
                            oFReader.onload = function(oFREvent) {
                                div.find(".img-default-logo").hide()
                                div.find(".img-logo").attr("src", oFREvent.target.result)
                                    .show()
                            }
                        } else {
                            setNotiffail(response.message);
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        ajaxError(xhr.status)
                    }
                });
            })

            $(".input-editable").blur(function() {
                let val = $(this).val();
                let data = $(this).data();
                const formData = new FormData();
                formData.append(data.name, val);
                formData.append("_token", token);
                $.ajax({
                    type: "POST",
                    url: "{{ route('parameter.entity_setup.update') }}",
                    data: formData,
                    dataType: "json",
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        console.log(response);
                        if (response.status) {
                            setNotifsuccess(response.message, false);
                        } else {
                            setNotiffail(response.message);
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        ajaxError(xhr.status)
                    }
                })
            })
        })

        function sendData(data) {
            setTimeout(
                function() {
                    const val = $("#" + data.type).val();
                    $.ajax({
                        type: "POST",
                        url: "{{ route('parameter.entity_setup.update') }}",
                        data: {
                            _token: token,
                            type: data.type,
                            value: val
                        },
                        dataType: "json",
                        success: function(response) {
                            console.log(response);
                            if (response.status) {
                                setNotifsuccess(response.message, false);
                            } else {
                                setNotiffail(response.message);
                            }
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            ajaxError(xhr.status)
                        }
                    })
                }, 1000);
        }
    </script>
@endpush