@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($temuan->status == 'entry')
                            @if ($authorize->edit == '1')
                                <button class="btn btn-warning mb-0"
                                    onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($temuan->id_temuan)) }}'">
                                    <i class="fas fa-edit"></i>
                                    <span class="font-weight-bold">Edit</span>
                                </button>

                                <button class="btn btn-primary mb-0"
                                    onclick="confirmProsesSP(event, '{{ $temuan->id_temuan }}')">
                                    <i class="fas fa-paper-plane"></i>
                                    <span class="font-weight-bold">Proses</span>
                                </button>
                            @endif
                            @if ($authorize->delete == '1')
                                <button class="btn btn-danger mb-0"
                                    onclick="confirmDelete(event, '{{ $temuan->id_temuan }}')">
                                    <i class="fas fa-trash"></i>
                                    <span class="font-weight-bold">Delete</span>
                                </button>
                            @endif
                        @elseif ($temuan->status == 'proses')
                            @if ($authorize->edit == '1')
                                <button class="btn btn-danger mb-0"
                                    onclick="confirmUnprocess(event, '{{ $temuan->id_temuan }}')">
                                    <i class="fas fa-undo"></i>
                                    <span class="font-weight-bold">UnProsses</span>
                                </button>
                            @endif
                        @elseif ($temuan->status == 'finish')
                            @if ($authorize->edit == '1')
                                <button class="btn btn-danger mb-0"
                                    onclick="confirmUnfinish(event, '{{ $temuan->id_temuan }}')">
                                    <i class="fas fa-undo"></i>
                                    <span class="font-weight-bold">UnFinish</span>
                                </button>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Detail Temuan</p>
                        <hr class="horizontal dark mt-0">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">ID Temuan</label>
                                    <input class="form-control bg-dark text-light" type="text"
                                        value="{{ $temuan->id_temuan }}" disabled>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Catering</label>
                                    <input class="form-control" type="text" value="{{ $temuan->nama_catering }}"
                                        disabled>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label">Tanggal Temuan</label>
                                    <input class="form-control" type="date" value="{{ $temuan->tanggal_temuan }}"
                                        disabled>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Shift</label>
                                    <input class="form-control" type="text" value="Shift {{ $temuan->shift }}" disabled>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Menu</label>
                                    <input class="form-control" type="text" value="{{ $temuan->menu_utama ?? '-' }}"
                                        disabled>
                                </div>


                                <div class="form-group">
                                    <label class="form-control-label">Complain</label>
                                    <textarea class="form-control" rows="3" disabled>{{ $temuan->complain }}</textarea>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Tindakan</label>
                                    <input class="form-control" type="text" value="{{ $temuan->tindakan }}" disabled>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Kategori</label>
                                    <input class="form-control" type="text" value="{{ ucfirst($temuan->kategori) }}"
                                        disabled>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">Poin</label>
                                    <input class="form-control" type="number" value="{{ $temuan->poin }}" disabled>
                                </div>


                                {{-- Tambahkan modal untuk tampilan gambar penuh (tambahkan sebelum @endsection) --}}
                                <div class="modal fade" id="imageModal" tabindex="-1" role="dialog"
                                    aria-labelledby="imageModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="imageModalLabel">Gambar Temuan -
                                                    {{ $temuan->id_temuan }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                <img id="modalImage" src="" alt="Gambar Temuan"
                                                    style="max-width: 100%; max-height: 80vh;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="mb-2" style="width: 300px;">
                                        <label class="form-label mb-1">Upload Gambar Temuan 1 <code>*</code></label>
                                        <div class="position-relative">
                                            <img id="preview_gambar_1"
                                                src="{{ $temuan->file_gambar_temuan ? asset('storage/temuan_images/' . $temuan->file_gambar_temuan) : asset('storage/noimage.png') }}"
                                                alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                style="width: 150px; aspect-ratio: 4/3; object-fit: cover;"
                                                onclick="showFullImage(this.src)">


                                            <input type="file" id="input_gambar_1" name="file_gambar_temuan"
                                                accept=".jpg,.jpeg,.png" class="d-none"
                                                onchange="previewSelectedImage(this, 'preview_gambar_1')">
                                        </div>
                                    </div>
                                </div>

                                {{-- gambar 2 --}}
                                <div class="form-group">
                                    <div class="mb-2" style="width: 300px;">
                                        <label class="form-label mb-1">Upload Gambar Temuan 2</label>
                                        <div class="position-relative">
                                            <img id="preview_gambar_2"
                                                src="{{ $temuan->gambar_2 ? asset('storage/temuan_images/' . $temuan->gambar_2) : asset('storage/noimage.png') }}"
                                                alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                style="width: 150px; aspect-ratio: 4/3; object-fit: cover;"
                                                onclick="showFullImage(this.src)">



                                            <input type="file" id="input_gambar_2" name="gambar_2"
                                                accept=".jpg,.jpeg,.png" class="d-none"
                                                onchange="previewSelectedImage(this, 'preview_gambar_2')">
                                        </div>
                                    </div>
                                </div>

                                {{-- gambar 3 --}}

                                <div class="form-group">
                                    <div class="mb-2" style="width: 300px;">
                                        <label class="form-label mb-1">Upload Gambar Temuan 3</label>
                                        <div class="position-relative">
                                            <img id="preview_gambar_3"
                                                src="{{ $temuan->gambar_3 ? asset('storage/temuan_images/' . $temuan->gambar_3) : asset('storage/noimage.png') }}"
                                                alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                style="width: 150px; aspect-ratio: 4/3; object-fit: cover;"
                                                onclick="showFullImage(this.src)">


                                            <input type="file" id="input_gambar_3" name="gambar_3"
                                                accept=".jpg,.jpeg,.png" class="d-none"
                                                onchange="previewSelectedImage(this, 'preview_gambar_3')">
                                        </div>
                                    </div>
                                </div>



                                {{-- gambar 4 --}}
                                <div class="form-group">
                                    <div class="mb-2" style="width: 300px;">
                                        <label class="form-label mb-1">Upload Gambar Temuan 4</label>
                                        <div class="position-relative">
                                            <img id="preview_gambar_4"
                                                src="{{ $temuan->gambar_4 ? asset('storage/temuan_images/' . $temuan->gambar_4) : asset('storage/noimage.png') }}"
                                                alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                style="width: 150px; aspect-ratio: 4/3; object-fit: cover;"
                                                onclick="showFullImage(this.src)">


                                            <input type="file" id="input_gambar_4" name="gambar_4"
                                                accept=".jpg,.jpeg,.png" class="d-none"
                                                onchange="previewSelectedImage(this, 'preview_gambar_4')">
                                        </div>
                                    </div>
                                </div>
                                <hr class="horizontal dark mt-0">

                                <br>
                                <h6>Note : Maksimal Size: <b>3 MB</b> | Format File: <b>JPG, JPEG, PNG</h6>




                                <div class="form-group">
                                    <label class="form-control-label">Status</label>
                                    <div>
                                        <span class="badge bg-{{ $temuan->status == 'entry' ? 'warning' : 'success' }}">
                                            {{ ucfirst($temuan->status) }}
                                        </span>
                                    </div>
                                </div>


                                {{-- Tambahkan section gambar di dalam form-group yang sesuai --}}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function previewSelectedImage(input, previewId) {
            const file = input.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.getElementById(previewId);
                if (img) {
                    img.src = e.target.result;
                }
            };
            reader.readAsDataURL(file);
        }

        function showFullImage(imgSrc) {
            const modal = new bootstrap.Modal(document.getElementById('imageModal'));
            document.getElementById('modalImage').src = imgSrc;
            modal.show();
        }

        function confirmProsesSP(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Proses SP',
                text: `Apakah anda yakin ingin memproses SP untuk temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Proses!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tambahkan AJAX request
                    $.ajax({
                        url: `{{ url($url_menu) }}/proses-sp/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: 'Status temuan berhasil diubah menjadi proses',
                                    icon: 'success'
                                }).then(() => {
                                    // Refresh halaman setelah berhasil
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire(
                                    'Gagal!',
                                    response.message || 'Terjadi kesalahan saat memproses SP',
                                    'error'
                                );
                            }
                        },
                        error: function(xhr) {
                            Swal.fire(
                                'Error!',
                                'Terjadi kesalahan saat memproses SP',
                                'error'
                            );
                            console.error('Error:', xhr);
                        }
                    });
                }
            });
        }

        function confirmUnprocess(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Unproses',
                text: `Apakah anda yakin ingin membatalkan proses temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Batalkan!',
                cancelButtonText: 'Tidak'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url($url_menu) }}/unprocess/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire('Berhasil!', 'Status berhasil diubah menjadi entry',
                                        'success')
                                    .then(() => window.location.reload());
                            }
                        }
                    });
                }
            });
        }

        function confirmUnfinish(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Unfinish',
                text: `Apakah anda yakin ingin membatalkan status finish temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Batalkan!',
                cancelButtonText: 'Tidak'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url($url_menu) }}/unfinish/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire('Berhasil!', 'Status berhasil diubah menjadi proses',
                                        'success')
                                    .then(() => window.location.reload());
                            }
                        }
                    });
                }
            });
        }

        function confirmFinish(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Finish',
                text: `Apakah anda yakin ingin menyelesaikan temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Selesaikan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url($url_menu) }}/finish/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire('Berhasil!', 'Status berhasil diubah menjadi finish',
                                        'success')
                                    .then(() => window.location.reload());
                            }
                        }
                    });
                }
            });
        }
    </script>
@endsection