@extends('frontend.vendor_dashboard.dashboard.layouts.app')

@section('content')
<div class="page-content">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Darta Chalani Details</h4>
                <div class="page-title-right">
                    <a href="{{ route('vendor.darta-chalani.index') }}" class="btn btn-secondary">
                        <i class="ri-arrow-left-line align-middle me-1"></i> Back to List
                    </a>
                    <!-- <button type="button" class="btn btn-primary" onclick="window.print();">
                        <i class="ri-printer-line align-middle me-1"></i> Print
                    </button> -->
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <!-- Main Card -->
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <!-- Left Column - Basic Information -->
                        <div class="col-lg-6">
                            <div class="card border shadow-none">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Basic Information</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-bordered table-striped mb-0">
                                        <tr>
                                            <th width="35%">Chalani No:</th>
                                            <td>{{ $dartaChalani->chalani_no ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Date:</th>
                                            <td>{{ $dartaChalani->date ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Type:</th>
                                            <td>
                                                <span class="badge bg-{{ $dartaChalani->type == 'incoming' ? 'success' : 'warning' }}">
                                                    {{ ucfirst($dartaChalani->type ?? 'N/A') }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Category:</th>
                                            <td>{{ $dartaChalani->category->name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Year:</th>
                                            <td class="nepali-input">{{ $dartaChalani->year->name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Month:</th>
                                            <td>{{ $dartaChalani->month ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Status:</th>
                                            <td>
                                                @if($dartaChalani->status == 'active')
                                                    <span class="badge bg-success">Active</span>
                                                @elseif($dartaChalani->status == 'inactive')
                                                    <span class="badge bg-danger">Inactive</span>
                                                @else
                                                    <span class="badge bg-warning">Pending</span>
                                                @endif
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column - Location Information -->
                        <div class="col-lg-6">
                            <div class="card border shadow-none">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Location Information</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-bordered table-striped mb-0">
                                        <tr>
                                            <th width="35%">Municipality:</th>
                                            <td>{{ $dartaChalani->municipality->name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Ward No:</th>
                                            <td>{{ $dartaChalani->ward->name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Plot No:</th>
                                            <td>{{ $dartaChalani->plot_no ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Area:</th>
                                            <td>{{ $dartaChalani->area ?? 'N/A' }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Party Information Row -->
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="card border shadow-none">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Party Information</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="info-box">
                                                <label class="fw-bold">Applicant Name:</label>
                                                <p class="mb-0">{{ $dartaChalani->applicant_name ?? 'N/A' }}</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-box">
                                                <label class="fw-bold">Office Name:</label>
                                                <p class="mb-0">{{ $dartaChalani->office_name ?? 'N/A' }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Subject Row -->
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="card border shadow-none">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Subject</h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-0">{{ $dartaChalani->subject ?? 'N/A' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Images Gallery Section -->
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="card border shadow-none">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">Attached Images</h5>
                                    @if($dartaChalani->images->count() > 0)
                                        <div>
                                            <button type="button" class="btn btn-sm btn-success" id="downloadAllBtn">
                                                <i class="ri-download-line"></i> Download All (ZIP)
                                            </button>
                                        </div>
                                    @endif
                                </div>
                                <div class="card-body">
                                    @if($dartaChalani->images->count() > 0)
                                        <div class="row gallery-wrapper" id="imageGallery">
                                            @foreach($dartaChalani->images as $index => $image)
                                                <div class="col-xl-3 col-lg-4 col-md-6 mb-4 gallery-item" data-image-id="{{ $image->id }}">
                                                    <div class="card h-100 shadow-sm">
                                                        <div class="position-relative">
                                                            <img src="{{ asset($image->image_path) }}" 
                                                                 alt="Image {{ $index + 1 }}" 
                                                                 class="card-img-top gallery-img"
                                                                 style="height: 200px; object-fit: cover; cursor: pointer;"
                                                                 data-bs-toggle="modal" 
                                                                 data-bs-target="#imageModal"
                                                                 data-image-url="{{ asset($image->image_path) }}"
                                                                 data-image-caption="{{ $image->caption ?? 'No caption' }}">
                                                            <div class="image-overlay">
                                                                <div class="overlay-buttons">
                                                                    <a href="{{ asset($image->image_path) }}" 
                                                                       class="btn btn-sm btn-light" 
                                                                       download="{{ $dartaChalani->chalani_no ?? 'image' }}_{{ $index+1 }}.jpg"
                                                                       title="Download">
                                                                        <i class="ri-download-line"></i>
                                                                    </a>
                                                                    <button type="button" 
                                                                            class="btn btn-sm btn-light view-img-btn"
                                                                            data-image-url="{{ asset($image->image_path) }}"
                                                                            data-image-caption="{{ $image->caption ?? 'No caption' }}"
                                                                            title="Zoom View">
                                                                        <i class="ri-zoom-in-line"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <p class="card-text small">
                                                                <strong>Caption:</strong> {{ $image->caption ?? 'No caption' }}
                                                            </p>
                                                            <p class="card-text small text-muted">
                                                                Order: {{ $image->order_position + 1 }}
                                                            </p>
                                                        </div>
                                                        <div class="card-footer bg-transparent">
                                                            <a href="{{ asset($image->image_path) }}" 
                                                               class="btn btn-sm btn-outline-primary w-100"
                                                               download="{{ $dartaChalani->chalani_no ?? 'image' }}_{{ $index+1 }}.jpg">
                                                                <i class="ri-download-line"></i> Download
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="text-center py-5">
                                            <i class="ri-image-line" style="font-size: 48px; color: #ccc;"></i>
                                            <p class="mt-3 text-muted">No images attached to this record.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Modal for Zoom View -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title">Image Preview</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center p-0">
                <img src="" alt="Preview" id="modalImage" style="max-width: 100%; max-height: 80vh;">
                <p id="modalCaption" class="mt-3 text-muted"></p>
            </div>
            <div class="modal-footer">
                <a href="#" id="downloadModalBtn" class="btn btn-success" download>
                    <i class="ri-download-line"></i> Download Image
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Gallery Image Styles */
    .gallery-img {
        transition: transform 0.3s ease;
    }
    
    .gallery-item {
        position: relative;
        overflow: hidden;
    }
    
    .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .gallery-item:hover .image-overlay {
        opacity: 1;
    }
    
    .overlay-buttons {
        display: flex;
        gap: 10px;
    }
    
    .overlay-buttons .btn {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
    }
    
    .overlay-buttons .btn:hover {
        transform: scale(1.1);
    }
    
    /* Print Styles */
    @media print {
        .page-title-right, .btn-group, .image-overlay, .card-footer, 
        #downloadAllBtn, .modal, .btn, .btn-group, .overlay-buttons {
            display: none !important;
        }
        
        .gallery-img {
            max-width: 100%;
            page-break-inside: avoid;
        }
        
        .gallery-item {
            break-inside: avoid;
            page-break-inside: avoid;
        }
        
        .card {
            border: 1px solid #ddd !important;
            box-shadow: none !important;
        }
    }
    
    /* Info Box Styles */
    .info-box label {
        font-size: 14px;
        color: #555;
        margin-bottom: 5px;
        display: block;
    }
    
    .info-box p {
        font-size: 16px;
        font-weight: 500;
        color: #333;
    }
    
    /* Table Styles */
    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
    $(document).ready(function() {
        // Image Modal functionality
        $('.gallery-img, .view-img-btn').on('click', function() {
            var imageUrl = $(this).data('image-url');
            var imageCaption = $(this).data('image-caption');
            
            $('#modalImage').attr('src', imageUrl);
            $('#modalCaption').text(imageCaption);
            $('#downloadModalBtn').attr('href', imageUrl);
            
            // Extract filename from URL for download
            var filename = imageUrl.split('/').pop();
            $('#downloadModalBtn').attr('download', filename);
        });
        
        // Download all images as ZIP
        $('#downloadAllBtn').on('click', function() {
            var images = @json($dartaChalani->images);
            var zip = new JSZip();
            var count = 0;
            var pendingDownloads = images.length;
            
            if (pendingDownloads === 0) {
                return;
            }
            
            // Show loading indicator
            var originalBtnText = $(this).html();
            $(this).html('<i class="ri-loader-4-line ri-spin"></i> Creating ZIP...').prop('disabled', true);
            
            images.forEach(function(image, index) {
                var filename = '{{ $dartaChalani->chalani_no ?? "image" }}_' + (index + 1) + '.jpg';
                var imageUrl = image.image_path;
                
                // Get image as blob
                fetch(imageUrl, {
                    headers: new Headers({
                        'Cache-Control': 'no-cache'
                    })
                })
                .then(response => response.blob())
                .then(blob => {
                    zip.file(filename, blob);
                    count++;
                    
                    if (count === pendingDownloads) {
                        // Generate ZIP and download
                        zip.generateAsync({ type: "blob" })
                            .then(function(content) {
                                saveAs(content, "{{ $dartaChalani->chalani_no ?? 'darta_chalani' }}_images.zip");
                                $('#downloadAllBtn').html(originalBtnText).prop('disabled', false);
                            })
                            .catch(function(error) {
                                console.error('Error creating ZIP:', error);
                                alert('Error creating ZIP file. Please try downloading images individually.');
                                $('#downloadAllBtn').html(originalBtnText).prop('disabled', false);
                            });
                    }
                })
                .catch(function(error) {
                    console.error('Error fetching image:', error);
                    pendingDownloads--;
                    count++;
                    
                    if (count === pendingDownloads && pendingDownloads > 0) {
                        zip.generateAsync({ type: "blob" })
                            .then(function(content) {
                                saveAs(content, "{{ $dartaChalani->chalani_no ?? 'darta_chalani' }}_images.zip");
                                $('#downloadAllBtn').html(originalBtnText).prop('disabled', false);
                            });
                    } else if (pendingDownloads === 0) {
                        alert('No images could be downloaded.');
                        $('#downloadAllBtn').html(originalBtnText).prop('disabled', false);
                    }
                });
            });
        });
        
        // Keyboard navigation for modal (optional)
        $(document).keydown(function(e) {
            if (e.key === "Escape" && $('#imageModal').hasClass('show')) {
                $('#imageModal').modal('hide');
            }
        });
    });
</script>
@endpush