@extends('layouts.main')

@section('main-container')
<div class="page-header d-print-none mb-3">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">W.H.S Pre-level Report</h2>
            </div>
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">

                <a href="{{ url('/billapproval-pdf/' . $bill->baseline_id    ) }}" class="btn btn-1">PDF-Download</a>
                    
                    <a href="{{ route('export.excel') }}" class="btn btn-outline-success">
                        <i class="ti ti-file-spreadsheet me-1"></i> Download Excel Report
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-body">
    <div class="container-xl">
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-primary text-white">
                Bill Approval Report
            </div>

            <div class="card-body">
                <!-- Section: Project & Location -->
               <!-- Header -->
<div class="text-center border rounded py-2 mb-3 bg-light">
    <h6 class="mb-1 text-uppercase fw-bold">Water Harvesting Structure</h6>
    <small class="text-secondary">Details for Bill Approval - Farm Pond</small>
</div>

<!-- Project & Location Details -->
<div class="card mb-2">
    <div class="card-header py-2">
        <h6 class="card-title mb-0">Project & Location Details</h6>
    </div>
    <div class="card-body py-2">
        <div class="row mb-1">
            <div class="col-md-4"><strong class="text-secondary">Name of PIA:</strong> {{ $bill->baseline->project->pia->name ?? 'N/A' }}</div>
            <div class="col-md-4"><strong class="text-secondary">Village:</strong> {{ $bill->baseline->village->name ?? 'N/A' }}</div>
            <div class="col-md-4"><strong class="text-secondary">Panchayat:</strong> {{ $bill->baseline->panchayat->name ?? 'N/A' }}</div>
        </div>
        <div class="row mb-1">
            <div class="col-md-4"><strong class="text-secondary">Block:</strong> {{ $bill->baseline->block->name ?? 'N/A' }}</div>
            <div class="col-md-4"><strong class="text-secondary">District:</strong> {{ $bill->baseline->district->name ?? 'N/A' }}</div>
            <div class="col-md-4"><strong class="text-secondary">Unit:</strong> {{ $bill->baseline->unit->name ?? 'N/A' }}</div>
        </div>
        <div class="row">
            <div class="col-md-4"><strong class="text-secondary">State:</strong> {{ $bill->baseline->state->name ?? 'N/A' }}</div>
            <div class="col-md-4"><strong class="text-secondary">Application Code:</strong> {{ $bill->baseline->application_code }}</div>
            <div class="col-md-4"><strong class="text-secondary">Financial Year:</strong> {{ $bill->baseline->financialYear->name }}</div>
        </div>
    </div>
</div>

<!-- Beneficiary Details -->
<div class="card mb-2">
    <div class="card-header py-2">
        <h6 class="card-title mb-0">Beneficiary Details</h6>
    </div>
    <div class="card-body py-2">
        <div class="row">
            <div class="col-md-6"><strong class="text-secondary">Beneficiary Name:</strong> {{ $bill->baseline->name_of_respondent ?? 'N/A' }}</div>
            <div class="col-md-6"><strong class="text-secondary">Plot No:</strong> {{ $bill->baseline->land->plot_khata ?? 'N/A' }}</div>
        </div>
    </div>
</div>


                <!-- Activity Table -->
                <div class="table-responsive">
                    <table class="table table-bordered table-sm text-center align-middle shadow-sm">
                        <thead class="table-info">
                            <tr>
                                <th rowspan="2" class="align-middle">Sl.No.</th>
                                <th rowspan="2" class="align-middle">Activity Name</th>
                                <th colspan="3">Estimated</th>
                                <th rowspan="2" class="align-middle">Unit</th>
                                <th colspan="3">Actual</th>
                                <th rowspan="2" class="align-middle">Bill Date</th>
                                <th rowspan="2" class="align-middle">GPS Reading</th>
                                <th rowspan="2" class="align-middle">Present<br> Status</th>
                                <th rowspan="2" class="align-middle">Remarks</th>
                            </tr>
                            <tr>
                                <th class="align-middle">Qty</th>
                                <th class="align-middle">Rate</th>
                                <th class="align-middle">Amount</th>
                                <th class="align-middle">Qty</th>
                                <th class="align-middle">Rate</th>
                                <th class="align-middle">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($readings as $index => $item)
                            <tr>
                                <td>{{ $item['serial_no'] ?? $index+1 }}</td>
                                <td class="text-start">{{ $item['activity_name'] ?? 'N/A' }}</td>
                                <td>{{ $item['estimated_quantity'] ?? 0 }}</td>
                                <td>{{ $item['estimated_rate'] ?? 0 }}</td>
                                <td>{{ $item['estimated_amount'] ?? 0 }}</td>
                                <td>{{ $item['unit'] ?? '' }}</td>
                                <td>{{ $item['actual_quantity'] ?? 0 }}</td>
                                <td>{{ $item['actual_rate'] ?? 0 }}</td>
                                <td>{{ $item['actual_amount'] ?? 0 }}</td>
                                @if ($loop->first)
                                <td rowspan="{{ count($readings) }}">{{ $bill->bill_date ?? 'N/A' }}</td>
                                <td rowspan="{{ count($readings) }}">{{ $bill->gps_reading ?? 'N/A' }}</td>
                                <td rowspan="{{ count($readings) }}">{{ $bill->present_status ?? 'N/A' }}</td>
                                <td rowspan="{{ count($readings) }}">{{ $bill->remarks ?? 'N/A' }}</td>
                                @endif
                            </tr>
                            @endforeach

                            
                            <tr><td colspan="8" class="text-end fw-bold">Total</td><td>{{ $bill->total ?? 'N/A' }}</td></tr>
                            <tr><td colspan="8" class="text-end fw-bold">GST Amount(18%)</td><td>{{ $bill->gst ?? 'N/A' }}</td></tr>
                            <tr><td colspan="8" class="text-end fw-bold">Grand Total</td><td class="fw-bold"> {{ $bill->grand_total ?? 'N/A' }}  </td></tr>

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


<div class="container mt-4">
    <div class="row row-cards">
            <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Pre Earthwork Photograph</h3>
                        </div>
                        <div class="card-body text-center">
                        
                           
                                <img src="{{ asset('storage/'.$bill->pre_work_photograph) }}" alt="Pre Work Photograph"  class="rounded shadow-sm object-cover" 
     style="width:400px; height:300px;" />
                                    </div>
                    </div>
                </div>



            <div class="col-md-6">
             <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Earthwork Photograph</h3>
                </div>
                <div class="card-body text-center"> <img name="earthwork_photograph"  src="{{ asset('storage/'.$bill->earthwork_photograph) }}" alt="Masonry Outlet Outer Image" class="img-fluid rounded shadow-sm"  style="width:400px; height:300px;" />
                   </div>
                   
                </div>
            </div>

        

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Inlet Photograph</h3>
                </div>
                <div class="card-body text-center">
                    <img src="{{ asset('storage/'.$bill->inlet_photograph) }}" alt="Inlet Image"  class="rounded shadow-sm object-cover" 
     style="width:400px; height:300px;" />
                    
                </div>
            </div>
        </div>



        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Masonry Outlet[Inner Side] Photograph </h3>
                </div>
                <div class="card-body text-center">
                    <img src="{{ asset('storage/'.$bill->masonry_outlet_photograph) }}" alt="Masonry Outlet Image"  class="rounded shadow-sm object-cover" 
     style="width:400px; height:300px;" />
                </div>
                
                 
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Masonry Outlet [Outer Side] Photograph</h3>
                </div>
                <div class="card-body text-center"><img src="{{ asset('storage/'.$bill->masonry_outlet_outer_photograph) }}" alt="Masonry Outlet Outer Image"  class="rounded shadow-sm object-cover" 
     style="width:400px; height:300px;" />

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

    <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Display Board Photograph</h3>
                </div>
                <div class="card-body text-center"><img src="{{ asset('storage/'.$bill->display_board_photograph) }}" alt="Masonry Outlet Outer Image"  class="rounded shadow-sm object-cover" 
     style="width:400px; height:300px;" />

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


@endsection