@extends('layouts.surat')

@section('title')
    Surat Keluar -
@endsection

@push('styles')
    <link href="{{ asset('assets/libs/jstree/jstree.bundle.css?v=7.0.9') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content_surat')
    <div class="card">
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div>
                        @foreach ($errors->all() as $error)
                            <p class="my-0">{{ $error }}</p>
                        @endforeach
                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
            @endif

                @if(!empty($referensi))
                    <p class="mb-1">Referensi Surat</p>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>No.Agenda</th>
                            <th>Tanggal</th>
                            <th>No.Surat</th>
                            <th>Perihal</th>
                            <th>Asal Surat</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{ $referensi->no_agenda }}</td>
                            <td>{{ format_date($referensi->tanggal_surat) }}</td>
                            <td>{{ $referensi->no_surat }}</td>
                            <td>{{ $referensi->perihal }}</td>
                            <td>{{ $referensi->satuan_kerja->nama }}</td>
                        </tr>
                        </tbody>
                    </table>
                @endif
            <form method="post" @if($is_edit == true) action="{{ route('surat.keluar.baru.simpan') }}" id="form_surat" @endif>
                @csrf
                <x-input type="hidden" name="id" value="{{ $surat->id }}" />
                <h5># Informasi Surat</h5>
                <div class="pl-3">
                    @include('surat.masuk._form')
                    <x-form-group id="satuan_kerja" caption="Asal Surat">
                        <x-input name="satuan_kerja_id" type="hidden" value="{{ $surat->satuan_kerja->id }}" />
                        <x-input name="satuan_kerja" value="{{ $surat->satuan_kerja->nama }}" caption="Klik untuk memilih asal surat" data-target="#satuan_kerja_modal" data-toggle="modal" />
                    </x-form-group>
                </div>
            </form>
            <h5># Nota Dinas</h5>
            <div class="pl-3">
                <div class="row">
                    @if($is_edit == true || $is_verifikasi_final == true)
                        <div class="col-md-6">
                            <x-form-group id="file_isi" caption="Pilih dan Upload Isi Surat">
                                <x-input type="file" name="file_isi" class="dropify" data-height="120" data-allowed-file-extensions="docx xlsx" />
                                <button type="button" class="btn btn-block btn-dark border-radius-0" onclick="upload_media_isi()" id="button_upload_isi_surat">Klik untuk Upload Isi Surat</button>
                            </x-form-group>
                        </div>
                    @endif
                    <div class="col-md-6">
                        <div id="table_isi"></div>
                    </div>
                </div>
            </div>
            <h5># Surat Dirjen ke Daerah</h5>
            <div class="pl-3">
                <div class="row">
                    @if($is_edit == true || $is_verifikasi_final == true)
                        <div class="col-md-6">
                            <x-form-group id="file_isi_dirjen" caption="Pilih dan Upload">
                                <x-input type="file" name="file_isi_dirjen" class="dropify" data-height="120" data-allowed-file-extensions="docx xlsx" />
                                <button type="button" class="btn btn-block btn-dark border-radius-0" onclick="upload_media('isi_dirjen')" id="button_upload_isi_dirjen_surat">Klik untuk Upload</button>
                            </x-form-group>
                        </div>
                    @endif
                    <div class="col-md-6">
                        <div id="table_isi_dirjen"></div>
                    </div>
                </div>
            </div>
            <h5># Lampiran Dirjen ke Daerah</h5>
            <div class="pl-3">
                <div class="row">
                    @if($is_edit == true || $is_verifikasi_final == true)
                        <div class="col-md-6">
                            <x-form-group id="file_isi_dirjen_lampiran" caption="Pilih dan Upload">
                                <x-input type="file" name="file_isi_dirjen_lampiran" class="dropify" data-height="120" data-allowed-file-extensions="docx xlsx" />
                                <button type="button" class="btn btn-block btn-dark border-radius-0" onclick="upload_media('isi_dirjen_lampiran')" id="button_upload_isi_dirjen_lampiran_surat">Klik untuk Upload</button>
                            </x-form-group>
                        </div>
                    @endif
                    <div class="col-md-6">
                        <div id="table_isi_dirjen_lampiran"></div>
                    </div>
                </div>
            </div>
            <h5># Surat Dirjen ke Menteri</h5>
            <div class="pl-3">
                <div class="row">
                    @if($is_edit == true || $is_verifikasi_final == true)
                        <div class="col-md-6">
                            <x-form-group id="file_isi_dirjen_menteri" caption="Pilih dan Upload">
                                <x-input type="file" name="file_isi_dirjen_menteri" class="dropify" data-height="120" data-allowed-file-extensions="docx xlsx" />
                                <button type="button" class="btn btn-block btn-dark border-radius-0" onclick="upload_media('isi_dirjen_menteri')" id="button_upload_isi_dirjen_menteri_surat">Klik untuk Upload</button>
                            </x-form-group>
                        </div>
                    @endif
                    <div class="col-md-6">
                        <div id="table_isi_dirjen_menteri"></div>
                    </div>
                </div>
            </div>
            <h5># Surat Menteri ke Daerah</h5>
            <div class="pl-3">
                <div class="row">
                    @if($is_edit == true || $is_verifikasi_final == true)
                        <div class="col-md-6">
                            <x-form-group id="file_isi_menteri_daerah" caption="Pilih dan Upload">
                                <x-input type="file" name="file_isi_menteri_daerah" class="dropify" data-height="120" data-allowed-file-extensions="docx xlsx" />
                                <button type="button" class="btn btn-block btn-dark border-radius-0" onclick="upload_media('isi_menteri_daerah')" id="button_upload_isi_menteri_daerah_surat">Klik untuk Upload</button>
                            </x-form-group>
                        </div>
                    @endif
                    <div class="col-md-6">
                        <div id="table_isi_menteri_daerah"></div>
                    </div>
                </div>
            </div>
            <h5># Lampiran Menteri ke Daerah</h5>
            <div class="pl-3">
                <div class="row">
                    @if($is_edit == true)
                        <div class="col-md-6">
                            <x-form-group id="file_isi_menteri_daerah_lampiran" caption="Pilih dan Upload Lampiran Surat">
                                <x-input type="file" name="file_isi_menteri_daerah_lampiran" class="dropify" data-height="120" data-allowed-file-extensions="docx xlsx" />
                                <button type="button" class="btn btn-block btn-dark border-radius-0" onclick="upload_media('isi_menteri_daerah_lampiran')" id="button_upload_isi_menteri_daerah_lampiran">Klik untuk Upload Lampiran</button>
                            </x-form-group>
                        </div>
                    @endif
                    <div class="col-md-6">
                        <div id="table_isi_menteri_daerah_lampiran"></div>
                    </div>
                </div>
            </div>
            <h5># Tujuan Surat</h5>
            <div class="pl-3">
                <div id="tujuan_surat_table"></div>
            </div>
            @if(count($media_referensi) > 0)
                <h5># Media Surat Referensi</h5>
                <table class="table table-nowrap mb-3 border-bottom">
                    <tbody>
                    @foreach($media_referensi as $key => $value)
                        <tr>
                            <td class="py-1 px-1 text-break">
                                <p class="my-0" style="white-space: normal!important;"><i class="mdi mdi-file-document font-size-16 text-primary"></i> {{ $value->nama }}</p>
                                <a target="_blank" href="{{ asset("download/media/$value->id") }}" class="btn btn-sm btn-light">Download</a>
                                @if(last(explode('.', $value->file)) == 'doc' || last(explode('.', $value->file)) == 'docx')
                                    <a target="_blank" href="{{ 'https://view.officeapps.live.com/op/embed.aspx?src=' . asset("assets/" . $value->file)  }}" class="btn btn-sm btn-light">Preview</a>
                                @else
                                    <a target="_blank" href="{{ asset("assets/$value->file") }}" class="btn btn-sm btn-light">Preview</a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif

            @if(count($kendali_referensi) > 0)
                <h5># Kendali Surat Referensi</h5>
                <div class="pl-3">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th class="py-2" width="40%">Asal</th>
                            <th class="py-2" width="40%">Tujuan</th>
                            <th class="py-2">Tanggal</th>
                            <th class="py-2" width="15%">Keterangan</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($kendali_referensi as $key => $value)
                            <tr>
                                <td class="py-2">
                                    {{ $value->asal->pegawai->nama }}<br>
                                    {{ ucwords($value->asal->jenis) }} - {{ $value->asal->satuan_kerja->nama }}
                                </td>
                                <td class="py-2">
                                    {{ $value->tujuan->pegawai->nama }}<br>
                                    {{ ucwords($value->tujuan->jenis) }} - {{ $value->tujuan->satuan_kerja->nama }}
                                </td>
                                <td class="py-2 text-nowrap align-middle">{{ format_date($value->created_at) }}</td>
                                <td class="py-2">
                                    {{ $value->isi_disposisi }}<br>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
            <h5># Kendali Surat</h5>
            <div class="pl-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th class="py-2" width="40%">Asal</th>
                        <th class="py-2" width="40%">Tujuan</th>
                        <th class="py-2">Tanggal</th>
                        <th class="py-2" width="15%">Keterangan</th>
                    </tr>
                    </thead>
                    <tbody>
                    @php($jabatan_pegawai = \Illuminate\Support\Facades\Auth::user()->pegawai->jabatan_pegawai)
                    @foreach($kendali_surat as $key => $value)
                        <tr>
                            <td class="py-2">
                                {{ $value->asal->pegawai->nama }}<br>
                                {{ ucwords($value->asal->jenis) }} - {{ $value->asal->satuan_kerja->nama }}
                                @if($value->file != '')
                                    <br>
                                    <a target="_blank" href="{{ 'https://view.officeapps.live.com/op/embed.aspx?src=' . $value->file }}" class="badge badge-primary p-1">Preview Lampiran</a>
                                    <a target="_blank" href="{{ asset('assets/' . $value->file) }}" class="badge badge-primary p-1">Download Lampiran</a>
                                @endif
                            </td>
                            <td class="py-2">
                                {{ $value->tujuan->pegawai->nama }}<br>
                                {{ ucwords($value->tujuan->jenis) }} - {{ $value->tujuan->satuan_kerja->nama }}
                            </td>
                            <td class="py-2 text-nowrap align-middle">{{ format_date($value->created_at) }}</td>
                            <td class="py-2">
                                @if($value->jenis == 'Permohonan Verifikasi') {{ $value->jenis }}
                                @elseif($value->jenis == 'Revisi')
                                    {{ $value->jenis }} <br> alasan : {{ $value->isi_disposisi }}
                                @else {{ $value->isi_disposisi }} @endif
                                @if($value->is_aktif == 1 && $value->asal_id == $jabatan_pegawai->id)
                                    <br>
                                    <a href="javascript:void(0)" class="text-dark" onclick="delete_kendali({{ $value->id }})">
                                        <span class="bg bg-danger text-white px-2" style="border-radius: 4px;">Hapus</span>
                                    </a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    <tr>
                        <td colspan="3" class="py-2">
                            @if($is_disposisi == true)
                                <button type="button" class="btn btn-success btn-block" onclick="disposisi()">Permohonan Verifikasi / Revisi</button>
                            @endif
                            @if($is_verifikasi_final == true && count(explode('.', $jabatan_pegawai->satuan_kerja->kode)) == 2)
                                <button type="button" class="btn btn-success btn-block" onclick="verifikasi_final()" id="button_verifikasi_final">Tanda Tangan</button>
                            @endif
                            @if($is_kirim == true)
                                <button type="button" class="btn btn-success btn-block" onclick="kirim_surat()">Kirim Surat</button>
                            @endif
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            @if($is_terkirim == true && $jabatan_pegawai->satuan_kerja->kode == '01.01.01')
            <h5># Filling</h5>
            <div class="pl-3">
                <x-form-group id="file_filling" caption="Pilih dan Upload Filling Surat">
                    <div class="row">
                        <div class="col-md-6">
                            <x-input
                                type="file" name="file_filling" class="dropify" data-height="200"
                                data-allowed-file-extensions="jpeg jpg png pdf"
                                accept="image/jpeg, image/jpg, image/png, application/pdf"
                            />
                            <button type="button" class="btn btn-block btn-dark border-radius-0" onclick="upload_media_filling()" id="button_upload_filling">Klik untuk Upload Filling</button>
                        </div>
                        <div class="col-md-6">
                            @if($surat->filling != '')
                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <x-file-preview :file="$surat->filling" name="preview" />
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </x-form-group>
            </div>
            <h5># Tracking Surat</h5>
            <div class="pl-3">
                <button type="button" class="btn btn-block btn-primary btn-sm mt-3" onclick="add_tracking()">Tambahkan Tracking Surat</button>
                <div id="data_tracking"></div>
            </div>
            <br>
            @endif
            @if($is_edit == true)
                <button class="btn btn-primary px-3" type="button" onclick="simpan()">Simpan dan Teruskan</button>
            @endif
            @if($surat->esign_path != '')
                <a target="_blank" class="btn btn-primary px-3" href="{{ str_replace('/var/www/html/storage/app/', '', $surat->esign_path) }}">Nota Dinas</a>
            @endif
                @if($surat->lampiran_path != '')
                    <a target="_blank" class="btn btn-primary px-3" href="{{ 'https://view.officeapps.live.com/op/embed.aspx?src=' . asset('assets/' . $surat->lampiran_path) }}">File Lampiran</a>
                @endif
            <a href="{{ route('surat.keluar') }}" class="btn btn-light ml-3">Kembali</a>
            <a href="{{ route('surat.disposisi.perbaiki_paraf', ['surat_id' => $surat->id]) }}" class="btn btn-success float-right">Perbaiki Paraf DIR</a>
            <div class="clearfix mt-3"></div>
            @foreach($surat->media_lainnya as $item)
                @if($item->file != '')
                    <a target="_blank" class="btn btn-primary px-3" href="{{ 'https://view.officeapps.live.com/op/embed.aspx?src=' . asset('assets/' . $item->file) }}">{{ $item->nama }}</a>
{{--                    <a target="_blank" class="btn btn-primary px-3" href="{{ asset('assets/' . $item->file) }}">{{ $item->nama }}</a>--}}
                @endif
            @endforeach
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        init_form_element();
        simpan = () => {
            $('#form_surat').submit();
        }
        delete_kendali = (id) => {
            $.post("{{ route('surat.disposisi.delete') }}", {
                _token: '{{ csrf_token() }}', id
            }, () => {
                window.location.reload();
            }).fail((xhr) => {
                console.log(xhr.responseText);
            });
        }
        @if($is_edit == false)
            // $('input.form-control').attr('disabled', 'disabled');
        @endif
        @if($is_verifikasi_final == true)
        let verifikasi_final = async () => {
            let $button = $('#button_verifikasi_final');
            $button.html('Loading ...');
            $button.attr('disabled', true);
            const { value: password } = await Swal.fire({
                title: 'Passphrase ESign',
                input: 'password',
                inputLabel: 'Password',
                inputPlaceholder: 'Input Passphrase ESign',
                inputAttributes: {
                    autocapitalize: 'off',
                    autocorrect: 'off'
                }
            })

            if (password) {
                // password = '';
                $.post("{{ route('surat.disposisi.verifikasi_final') }}", {
                    _token: '{{ csrf_token() }}',
                    surat_id: '{{ $surat->id }}', password
                }, (result) => {
                    console.log(result);
                    if (result && result.success) {
                        swal.fire("Tanda tangan berhasil !");
                        window.location.reload();
                    } else {
                        $button.attr('disabled', false);
                        $button.html('Verifikasi Final');
                        swal.fire(result.error);
                    }
                }).fail((xhr) => {
                    console.log(xhr.responseText);
                });
            } else {
                swal.fire('Lengkapi password !');
            }
        }
        @endif

        @if($is_kirim == true)
        kirim_surat = () => {
            $.post("{{ route('surat.disposisi.kirim') }}", {
                _token: '{{ csrf_token() }}',
                surat_id: '{{ $surat->id }}'
            }, () => {
                window.location.reload();
            }).fail((xhr) => {
                console.log(xhr.responseText);
            });
        }
        @endif
    </script>
@endpush

@include('surat._isi_surat')
@include('surat._lampiran_surat')
@if($is_verifikasi_final == false)
@include('surat._tujuan_surat', ['is_external' => 1])
@endif

{{--Tracking Surat--}}
@push('scripts')
    <div class="modal fade bs-example-modal-lg show" tabindex="-1" id="modal_tracking_surat">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0">Tracking Surat</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    @include('surat.tracking._info', ['surat_id' => $surat->id])
                </div>
            </div>
        </div>
    </div>
    <script>
        $data_tracking = $('#data_tracking');
        search_tracking = () => {
            $.post("{{ route('surat.tracking.search') }}", {
                _token: '{{ csrf_token() }}',
                surat_id: '{{ $surat->id }}'
            }, (result) => {
                $data_tracking.html(result);
            }).fail((xhr) => {
                $data_tracking.html(xhr.responseText);
            });
        }
        search_tracking();
        add_tracking = () => {
            $('#modal_tracking_surat').modal('show');
        }
    </script>
@endpush

{{--Filling Surat--}}
@push('scripts')
    <script>
        upload_media_filling = () => {
            $button_upload_filling = $('#button_upload_filling');
            $file_filling = $('#file_filling')[0];
            if ($file_filling.files.length > 0) {
                let data = new FormData();
                data.append('_token', '{{ csrf_token() }}');
                data.append('file_filling', $file_filling.files[0]);
                data.append('id', '{{ $surat->id }}');

                $button_upload_filling.html('Loading <i class="fa fa-spinner fa-spin"></i>');
                $.ajax({
                    url: "{{ route('surat.save_filling') }}",
                    type: 'post',
                    data: data,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: () => {
                        swal.fire('File berhasil diupload');
                        window.location.reload();
                    }
                }).fail((xhr) => {
                    console.log(xhr.responseText);
                });
            } else {
                swal.fire('File kosong !');
            }
        }
    </script>
@endpush

@if($is_disposisi == true)
    @push('scripts')
        <div class="modal fade bs-example-modal-lg show" tabindex="-1" id="tujuan_disposisi_modal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mt-0">Tujuan Disposisi / Teruskan</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="tujuan_disposisi_search_table"></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $tujuan_disposisi_search_table = $('#tujuan_disposisi_search_table');
            $tujuan_disposisi_modal = $('#tujuan_disposisi_modal');
            tujuan_disposisi_search = () => {
                $tujuan_disposisi_search_table.html('Loading ...');
                $.post("{{ route('surat.disposisi.search') }}", {
                    _token: '{{ csrf_token() }}',
                    surat_id: '{{ $surat->id }}'
                }, (result) => {
                    $tujuan_disposisi_search_table.html(result);
                }).fail((xhr) => {
                    $tujuan_disposisi_search_table.html(xhr.responseText);
                });
            }
            disposisi = () => {
                tujuan_disposisi_search();
                $tujuan_disposisi_modal.modal('show');
            }
            pilih_kendali = (tujuan_id, tujuan_jenis, jenis) => {
                $.post("{{ route('surat.disposisi.save') }}", {
                    _token: '{{ csrf_token() }}',
                    surat_id: '{{ $surat->id }}',
                    tujuan_id, tujuan_jenis, jenis
                }, () => {
                    $tujuan_disposisi_modal.modal('toggle');
                    window.location.reload();
                });
            }
        </script>
    @endpush
@endif