@extends('components.customer_layout')
@section('customer-content')
    <div class="container mt-4">
        <div class="card shadow-lg">
            <div class="card-header bg-white text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="fas fa-file-alt"></i> Application Details : {{ $complaint->service->name }}
                    @if($complaint->status !== 'approved' && $complaint->status !== 'rejected')
                        @if($complaint->service->name == "Galmee Dhaloota")
                            <a href="{{ route('civil.registration.birth.edit', $complaint->id) }}" class="btn btn-sm btn-warning">
                                <i class="fa fa-edit"></i> Edit
                            </a>
                        @endif
                    @endif
                </h4>
                <div>
                    @if($complaint->status == 'approved')
                        <a href="#" onclick="printReceipt()" class="btn btn-sm btn-primary">
                            <i class="fas fa-print"></i> Print
                        </a>
                    @else
                        <span class="badge bg-warning text-dark">{{ ucfirst($complaint->status) }}</span>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <!-- Receipt Container -->
                <div class="receipt p-4" id="printArea">
                    <div class="bank-whu text-center bg-light p-3 rounded">
                        <img src="{{ asset('assets/images/logo.png') }}" alt="Adama City Administration" class="mb-2" width="80">
                        <h3 class="text-muted">Adama City Administration</h3>
                        <p class="text-muted">{{$complaint->office->name}}</p>
                    </div>
                    <div class="company-white bg-white p-3 rounded shadow-sm">
                        <h5 class="text-primary"><i class="fas fa-map-marker-alt"></i> Contact Information</h5>
                        <ul class="list-unstyled">
                            <li><strong>Country:</strong> Ethiopia</li>
                            <li><strong>Region:</strong> Oromia</li>
                            <li><strong>Zone:</strong> East Shewa</li>
                            <li><strong>City:</strong> Adama</li>
                            <li><strong>Email:</strong> adamacity@gov.et</li>
                            <li><strong>Tel:</strong> +251-12-34-56-67</li>
                            <li><strong>Fax:</strong> +251-551-45-22</li>
                            <li><strong>Address:</strong> Adama City St, 01, Derartu Street</li>
                        </ul>
                    </div>
                    <h5 class="bg-gradient-white text-dark p-2 rounded mt-3"><i class="fas fa-user"></i> Customer Information</h5>
                    <table class="table table-bordered">
                        <tbody>
                        <tr><td><strong>Customer Name:</strong></td><td>{{ $complaint->customer->full_name }}</td></tr>
                        <tr><td><strong>Office:</strong></td><td>{{ $complaint->office->name }}</td></tr>
                        <tr><td><strong>Service:</strong></td><td>{{ $complaint->service->name }}</td></tr>
                        <tr>
                            <td><strong>App Status:</strong></td>
                            <td>
                                    <span class="badge
                                        @if($complaint->status == 'approved') bg-success
                                        @elseif($complaint->status == 'pending') bg-info
                                        @elseif($complaint->status == 'rejected') bg-danger
                                        @else bg-secondary
                                        @endif">
                                        <i class="fas
                                            @if($complaint->status == 'approved') fa-check-circle
                                            @elseif($complaint->status == 'pending') fa-hourglass-half
                                            @elseif($complaint->status == 'rejected') fa-times-circle
                                            @else fa-question-circle
                                            @endif"></i>
                                        {{ ucfirst($complaint->status) }}
                                    </span>
                            </td>
                        </tr>
                        <tr><td><strong>Created At:</strong></td><td>{{ \Carbon\Carbon::parse($complaint->created_at)->format('d M, Y H:i A') }}</td></tr>
                        <tr><td><strong>Application Number:</strong></td><td>{{ $complaint->application_number }}</td></tr>
                        <tr><td><strong>Description:</strong></td><td>{{ $complaint->description }}</td></tr>

                        @if($complaint->status == 'approved')
                            <tr><td><strong>Approved By:</strong></td><td>{{ $complaint->approvedByTeamLeader->name ?? 'N/A' }}</td></tr>
                            <tr><td><strong>Approved At:</strong></td><td>{{ \Carbon\Carbon::parse($complaint->approved_at)->format('d M, Y H:i A') }}</td></tr>
                        @endif

                        @if($complaint->status == 'rejected')
                            <tr><td><strong>Rejected By:</strong></td><td>{{ $complaint->rejected_by->name ?? 'N/A' }}</td></tr>
                            <tr><td><strong>Approved At:</strong></td><td>{{ \Carbon\Carbon::parse($complaint->approved_at)->format('d M, Y H:i A') }}</td></tr>
                            <tr><td><strong>Rejection Reason:</strong></td><td class="text-danger">{{ $complaint->rejection_reason }}</td></tr>
                        @endif
                        </tbody>
                    </table>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <h5><i class="fas fa-file-alt"></i> Uploaded Files</h5>
                            <hr>
                            @if($complaint->files)
                                <a href="{{ asset($complaint->files)  }}" class="btn btn-outline-primary"
                                   target="_blank">📂 Download File</a>
                                <embed src="{{ asset($complaint->files) }}" width="100%" height="420px">
                            @else
                                <p>No files uploaded.</p>
                            @endif
                        </div>
                        <div class="col-md-5">
                            @if($complaint->service->name == "Galmee Gaa'elaa" || $complaint->service->name == "Galmee Hiikkaa Gaa'eelaa")
                                <h5><i class="fas fa-camera"></i> Photos</h5>
                                <hr>
                                <div class="photo-section">
                                    <p>Suura Abbaa Warraa</p>
                                    <div class="photo-container">
                                        @if($complaint->photo)
                                            <a href="{{ asset($complaint->photo) }}" target="_blank">
                                                <img src="{{ asset($complaint->photo) }}" class="img-fluid rounded shadow"
                                                     width="300">
                                            </a>
                                        @else
                                            <p>No photo available</p>
                                        @endif
                                    </div>
                                    <p>Suura Haadha Warraa</p>
                                    <div class="photo-container">
                                        @if($complaint->wife_photo)
                                            <a href="{{ asset($complaint->wife_photo) }}" target="_blank">
                                                <img src="{{ asset($complaint->wife_photo) }}"
                                                     class="img-fluid rounded shadow" width="300">
                                            </a>
                                        @else
                                            <p>No photo available</p>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mt-4 text-center">
                    <a href="{{ route('myapplication.list') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    <style>
        .receipt {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .bank-info img {
            width: 80px;
        }

        .bank-info h3 {
            color: #8b0000;
        }

        .company-info {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        td {
            padding: 10px;
            border-bottom: 1px solid #ccc;
            text-align: left;
        }

        td:first-child {
            font-weight: bold;
            width: 40%;
        }

        .stamp img, .qr-code img {
            display: block;
            margin: auto;
        }

        @media print {
            body * {
                visibility: hidden;
            }
            #printArea, #printArea * {
                visibility: visible;
            }
            #printArea {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
        }
    </style>

    <script>
        function printReceipt() {
            window.print();
        }
    </script>

@endsection