@extends('layouts.app')

@section('content')
<div class="container">
    <div class="card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Indication Details</h5>
            <div>
                <a href="{{ route('indications.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to List
                </a>
                <a href="{{ route('indications.edit', $indication) }}" class="btn btn-primary">
                    <i class="fas fa-edit"></i> Edit
                </a>
                <a href="{{ route('indications.print.single', $indication) }}" target="_blank" class="btn btn-info">
                    <i class="fas fa-print"></i> Print
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Location Details -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold">Location Details</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered mb-0">
                                <tr>
                                    <th style="width: 40%">State</th>
                                    <td>{{ $indication->state->state_name ?? $indication->state_name_if_direct_column ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>District</th>
                                    <td>{{ $indication->district->district_name ?? $indication->daerah ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Mukim/Town</th>
                                    <td>{{ $indication->subdistrict->subdistrict_name ?? $indication->mukim_bandar ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Section/Block</th>
                                    <td>{{ $indication->seksyen_blok ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Scheme</th>
                                    <td>{{ $indication->kawasan_skim_perumahan ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Address</th>
                                    <td>{{ $indication->alamat ?? 'N/A' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Property Details -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold">Property Details</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered mb-0">
                                <tr>
                                    <th style="width: 40%">Lot Type</th>
                                    <td>{{ $indication->jenis_lot_plot ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Lot Number</th>
                                    <td>{{ $indication->no_lot_plot ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Lot Status</th>
                                    <td>{{ $indication->status_lot ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Property Type</th>
                                    <td>{{ $indication->jenis_harta_tanah ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Building Type</th>
                                    <td>{{ $indication->jenis_bangunan ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Storeys</th>
                                    <td>
                                        @if($indication->bil_tgkt_atas_tanah || $indication->bil_tgkt_bawah_tanah)
                                            Above: {{ $indication->bil_tgkt_atas_tanah ?? '0' }}<br>
                                            Below: {{ $indication->bil_tgkt_bawah_tanah ?? '0' }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Land Details -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold">Land Details</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered mb-0">
                                <tr>
                                    <th style="width: 40%">Land Area</th>
                                    <td>{{ number_format($indication->luas_lot_petak ?? 0, 0) }} {{ $indication->unit_luas ?? 'm²' }}</td>
                                </tr>
                                <tr>
                                    <th>Title Type</th>
                                    <td>{{ $indication->jenis_hakmilik ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Title Number</th>
                                    <td>{{ $indication->no_hakmilik ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Tenure Type</th>
                                    <td>{{ $indication->jenis_pegangan ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Lease Period</th>
                                    <td>{{ $indication->tempoh_pajakan ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Lease Expiry</th>
                                    <td>{{ $indication->tarikh_luput_pajakan ? \Carbon\Carbon::parse($indication->tarikh_luput_pajakan)->format('d-m-Y') : 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Land Classification</th>
                                    <td>{{ $indication->klasifikasi_tanah ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Cultivation</th>
                                    <td>{{ $indication->jenis_tanaman ?? 'N/A' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Building Details -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold">Building Details</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered mb-0">
                                <tr>
                                    <th style="width: 40%">Building Area</th>
                                    <td>{{ number_format($indication->luas_bangunan_utama ?? 0, 0) }} m²</td>
                                </tr>
                                <tr>
                                    <th>Number of Rooms</th>
                                    <td>{{ $indication->bilangan_bilik ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>RSS Number</th>
                                    <td>{{ $indication->no_rss_pelan ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Share</th>
                                    <td>{{ $indication->syer ?? 'N/A' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Transaction Details -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold">Transaction Details</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered mb-0">
                                <tr>
                                    <th style="width: 40%">Transaction Date</th>
                                    <td>{{ $indication->tarikh_pindahmilik ? \Carbon\Carbon::parse($indication->tarikh_pindahmilik)->format('d-m-Y') : 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Price (RM)</th>
                                    <td>{{ number_format($indication->balasan_rm ?? 0, 0) }}</td>
                                </tr>
                                <tr>
                                    <th>PSF</th>
                                    <td>{{ number_format($calcPSF ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <th>Seller</th>
                                    <td>{{ $indication->nama_pemberi_pindahmilik ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Buyer</th>
                                    <td>{{ $indication->nama_penerima_pindahmilik ?? 'N/A' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Officer & Contact Details -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold">Officer & Contact Details</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered mb-0">
                                <tr>
                                    <th style="width: 40%">Valuer</th>
                                    <td>{{ $indication->user->name ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Officer Name</th>
                                    <td>{{ $indication->officer_name ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Contact No</th>
                                    <td>{{ $indication->contact_no ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Email</th>
                                    <td>{{ $indication->email ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Bank Name</th>
                                    <td>{{ $indication->bank_name ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Branch</th>
                                    <td>{{ $indication->branch ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Full Address</th>
                                    <td>{{ $indication->full_address ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Quotation Amount</th>
                                    <td>{{ number_format($indication->quotation_amount ?? 0, 0) }}</td>
                                </tr>
                                <tr>
                                    <th>Remarks</th>
                                    <td>{{ $indication->remarks ?? 'N/A' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .card {
        border: 1px solid rgba(0,0,0,.125);
    }
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
    .table th {
        background-color: #f8f9fa;
    }
    .table td, .table th {
        padding: 0.5rem;
        vertical-align: middle;
    }

    /* Print Styles */
    @media print {
        .btn, .no-print {
            display: none !important;
        }
        
        .container {
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .card {
            border: none !important;
            box-shadow: none !important;
        }

        .card-header {
            background-color: #fff !important;
            border-bottom: 2px solid #000 !important;
            padding: 10px 0 !important;
        }

        .card-body {
            padding: 0 !important;
        }

        .table {
            width: 100% !important;
            border-collapse: collapse !important;
        }

        .table th, .table td {
            border: 1px solid #000 !important;
            padding: 8px !important;
            font-size: 12pt !important;
        }

        .table th {
            background-color: #f8f9fa !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        .row {
            display: block !important;
            width: 100% !important;
        }

        .col-md-6 {
            width: 100% !important;
            float: none !important;
            margin-bottom: 20px !important;
        }

        /* Add page break before each new section */
        .col-md-6 {
            page-break-inside: avoid;
        }

        /* Add header to each printed page */
        @page {
            margin: 2cm;
        }

        /* Add title to the printout */
        .card-header h5::before {
            content: "Indication Details - ";
            font-weight: bold;
        }

        /* Ensure all content is visible */
        body {
            visibility: visible !important;
        }

        /* Hide any elements that shouldn't be printed */
        .no-print {
            display: none !important;
        }
    }
</style>
@endpush
@endsection