@extends('layouts.admin')
@section('title')
    Rekap Klasikal
@endsection
@section('customStyle')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
@endsection
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12 mt-5">
            <!-- Basic Card Example -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex">
                    <h6 class="m-0 font-weight-bold text-primary">Laporan Klasikal {{$report->bulan_kla." ".$report->tahun_kla}}</h6>
                    <a href="{{ url('/admin/report_klasikal/'.$_GET['id_parti']) }}" class="btn btn-primary ml-auto">Kembali</a>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <!-- <td colspan="2">
                            <embed src="{{ asset('data_file/file_klasik/'. $report->file_kla) }}" type="application/pdf" width="100%" height="600px" />
                        </td> -->
                        <td colspan="2">
                            @if(pathinfo($report->file_kla, PATHINFO_EXTENSION) == 'docx')
                                <iframe src="https://view.officeapps.live.com/op/embed.aspx?src={{ asset('data_file/file_klasik/'. $report->file_kla) }}" width="100%" height="600px"></iframe>
                            @elseif(pathinfo($report->file_kla, PATHINFO_EXTENSION) == 'pdf')
                                <embed src="{{ asset('data_file/file_klasik/'. $report->file_kla) }}" type="application/pdf" width="100%" height="600px" />
                            @else
                                <p>Unsupported file format.</p>
                            @endif
                        </td>

                        <tr>
                            <td style="width: 30%"><b>Komentar Mentor</b></td>
                            <td>
                                <textarea name="komentar_kla" id="komentar_kla" cols="30" rows="5" class="form-control">{{$report->komentar_kla}}</textarea>
                            </td>
                        </tr>
                    </table>

                    <button class="btn btn-primary" id="btn-save">Simpan</button>
                    <a href="{{ url()->previous() }}">
                        <button class="btn btn-default">Kembali</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4/dist/sweetalert2.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4/dist/sweetalert2.min.css">
    
    <script>
        $(document).ready( function () {
            $('#btn-save').click(function(){
                $.ajax({
                    url: "{{route('report-klasikal.validation', $report->id_kla)}}",
                    type: "POST",
                    data: {
                        komentar_kla: $('#komentar_kla').val(),
                        _token: "{{ csrf_token() }}",
                    },
                    success: function(response) {
                        Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Your request has been successfully processed.'
                        }).then((willLeave) => {
                        if (willLeave) {
                            window.location.href = '{{ url('/admin/report_klasikal/'.$_GET['id_parti']) }}';
                        }
                        });
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'An error occurred: ' + error
                        });
                    }
                });
            });
        } );
    </script>
@endsection