@extends('admin.admin_master')
@section('content-header', $page_header)
@section('content')
<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Claims Details</li>
                    </ol>
                </div>
                <div class="col-sm-6">
                    <span class="float-right"><a href="{{ route('claim.list') }}" class="btn btn-sm btn-fill btn-warning">Back to List</a></span>
                </div>
            </div>
        </div>
	</section>

	<!-- Main content -->
	<section class="content">
	  <div class="row">
		<div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <table class="table table-hover table-hover table-condensed table-striped table-bordered">
                        <tbody>
                            <tr>
                                <td style="width: 150px;">Policy Number</td>
                                <td>{{$record->policynumber ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Name</td>
                                <td class="text-capitalize">{{$record->insuredname ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Email</td>
                                <td>{{$record->email ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Phone</td>
                                <td>{{$record->phone ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Contact Person</td>
                                <td>{{$record->contactperson ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Date of Loss</td>
                                <td>{{$record->dateofloss ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Cause of loss</td>
                                <td>{{$record->causeofloss ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Cause location</td>
                                <td>{{$record->placeofloss ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Message</td>
                                <td>{{$record->additionalInfo ?? ''}}</td>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Requested date</td>
                                <td>{{$record->created_at ?? ''}}</td>
                            </tr>
                            <tr>
    <td>Uploaded Files</td>
    <td>
        @php
            $files = [];
            if (!empty($record->lossdocument)) {
                $decoded = json_decode($record->lossdocument, true);
                if (is_array($decoded)) {
                    foreach ($decoded as $path) {
                        $files[] = ['path' => $path, 'name' => basename($path)];
                    }
                } else {
                    $files[] = ['path' => $record->lossdocument, 'name' => basename($record->lossdocument)];
                }
            }

            $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
        @endphp

        @if (count($files) > 0)
            <div class="row">
                @foreach ($files as $file)
                    @php
                        $fileUrl = asset('storage/' . $file['path']);
                        $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
                    @endphp

                    <div class="col-md-4 mb-3">
                        <div class="card">
                            <div class="card-body text-center">

                                <strong>{{ $file['name'] }}</strong>
                                <br>

                                {{-- IMAGE --}}
                                @if (in_array($ext, $imageExtensions))
                                    <img src="{{ $fileUrl }}"
                                         onclick="openPreviewModal('{{ $fileUrl }}', 'image')"
                                         class="img-fluid mt-2 rounded"
                                         style="max-height: 150px; cursor: zoom-in;">

                                {{-- PDF --}}
                                @elseif ($ext === 'pdf')
                                    <div onclick="openPreviewModal('{{ $fileUrl }}', 'pdf')"
                                         style="cursor:pointer; border:1px solid #ddd; height:150px; margin-top:10px; display:flex; align-items:center; justify-content:center;">
                                         <i class="fas fa-file-pdf fa-3x text-danger"></i>
                                    </div>

                                {{-- OTHER --}}
                                @else
                                    <p class="mt-2">
                                        No preview.<br>
                                        <a href="{{ $fileUrl }}" target="_blank">Download</a>
                                    </p>
                                @endif

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

                @endforeach
            </div>
        @else
            No files uploaded.
        @endif
    </td>
</tr>

                        </tbody>
                    </table>
                </div>
            </div>
		</div>
	  </div>

	</section>
	<!-- /.content -->
  </div>
  <!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title">File Preview</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>

            <div class="modal-body text-center" style="height:80vh; overflow:auto;">
                <div id="imagePreviewContainer" style="display:none;">
                    <img id="previewImage" src="" style="max-width:100%; max-height:100%; cursor:grab;">
                </div>

                <div id="pdfPreviewContainer" style="display:none; height:100%;">
                    <object id="previewPdfObject" data="" type="application/pdf"
                            style="width:100%; height:100%;">
                    </object>
                </div>
            </div>

            <div class="modal-footer justify-content-between">
                <button class="btn btn-secondary" data-dismiss="modal">Close</button>

                <div>
                    <button class="btn btn-primary" id="zoomInBtn">Zoom In</button>
                    <button class="btn btn-primary" id="zoomOutBtn">Zoom Out</button>
                    <button class="btn btn-primary" id="zoomResetBtn">Reset</button>
                </div>
            </div>

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

@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom/dist/panzoom.min.js"></script>

<script>
    let panzoomInstance = null;

    function openPreviewModal(url, type) {

        $('#imagePreviewContainer').hide();
        $('#pdfPreviewContainer').hide();

        if (panzoomInstance) {
            panzoomInstance.destroy();
            panzoomInstance = null;
        }

        if (type === 'image') {
            $('#previewImage').attr('src', url);
            $('#imagePreviewContainer').show();

            setTimeout(() => {
                panzoomInstance = Panzoom(document.getElementById('previewImage'), {
                    maxScale: 5,
                    minScale: 1
                });
            }, 200);

        } else if (type === 'pdf') {
            $('#previewPdfObject').attr('data', url);
            $('#pdfPreviewContainer').show();
        }

        $('#previewModal').modal('show');
    }

    $('#zoomInBtn').click(function() {
        if (panzoomInstance) panzoomInstance.zoomIn();
    });

    $('#zoomOutBtn').click(function() {
        if (panzoomInstance) panzoomInstance.zoomOut();
    });

    $('#zoomResetBtn').click(function() {
        if (panzoomInstance) panzoomInstance.reset();
    });
</script>

@endpush