@extends('layouts.main')

@section('head')

    <meta charset="utf-8">
    <title>{{ ucwords($consumer->name) }}'s Profile</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta content="" name="author">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- App favicon -->
@endsection

@section('otherCss')
@endsection

@section('contents')

    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <div class="float-right">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Net Agreement</a></li>
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Consumers</a></li>
                            <li class="breadcrumb-item active">Profile</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Profile</h4>
                </div>
                <!--end page-title-box-->
            </div>
            <!--end col-->
        </div><!-- end page title end breadcrumb -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body met-pro-bg">
                        <div class="met-profile">
                            <div class="row">
                                <div class="col-lg-4 align-self-center mb-3 mb-lg-0">
                                    <div class="met-profile-main">
                                        <div class="met-profile-main-pic">
                                            <img src="{{ asset('assets/images/users/user-icon.png') }}" alt="" class="rounded-circle w-100" />
                                            <span class="fro-profile_main-pic-change"><i class="fas fa-camera"></i></span>
                                        </div>
                                        <div class="met-profile_user-detail">
                                            <h5 class="met-user-name">{{ ucwords($consumer->name) }}</h5>
                                            <p class="mb-0 met-user-name-post">
                                                {{ $consumer->subDivision->name }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-4 ml-auto">
                                    <ul class="list-unstyled personal-detail">
                                        <li class=""><i class="dripicons-phone mr-2 text-info font-18"></i>
                                            <b>Phone </b>: +91 {{ $consumer->phone }}</li>
                                        <li class="mt-2">
                                            <i class="dripicons-mail text-info font-18 mt-2 mr-2"></i> 
                                            <b>Email</b>: {{ $consumer->email }}
                                        </li>
                                        <li class="mt-2">
                                            <i class="dripicons-location text-info font-18 mt-2 mr-2"></i>
                                            <b>Location</b> : {{ $consumer->address }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="general_detail_tab" data-toggle="pill" href="#general_detail">General</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="activity_detail_tab" data-toggle="pill" href="#activity_detail">Activity
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="settings_detail_tab" data-toggle="pill" href="#settings_detail">Settings
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <div class="row">
            <div class="col-12">
                <div class="tab-content detail-list" id="pills-tabContent">
                    <div class="tab-pane show active" id="general_detail">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <div class="pro-order-box"><i class="mdi mdi-truck-fast text-success"></i>
                                                    <h4 class="header-title">Installed Capacity</h4>
                                                    <p class="text-muted mb-0">{{$consumer->installed_capacity ?? 'NA'}}</p>
                                                </div>
                                            </div><!--end col-->
                                            <div class="col-lg-3">
                                                <div class="pro-order-box"><i class="mdi mdi-refresh text-danger"></i>
                                                    <h4 class="header-title">Meter No</h4>
                                                    <p class="text-muted mb-0">{{$consumer->meter_no ?? 'NA'}}</p>
                                                </div>
                                            </div><!--end col-->
                                            <div class="col-lg-3">
                                                <div class="pro-order-box"><i class="mdi mdi-headset text-warning"></i>
                                                    <h4 class="header-title">Consumer No.</h4>
                                                    <p class="text-muted mb-0">{{$consumer->consumer_no ?? 'NA'}}</p>
                                                </div>
                                            </div><!--end col-->
                                            <div class="col-lg-3">
                                                <div class="pro-order-box mb-0"><i class="mdi mdi-wallet text-purple"></i>
                                                    <h4 class="header-title">Date of Installation</h4>
                                                    <p class="text-muted mb-0">{{$consumer->date_of_installation?->format('d-m-Y') ?? 'NA'}}</p>
                                                </div><!--end col-->
                                            </div>
                                        </div><!--end row-->
                                    </div><!--end card-body-->
                                </div><!--end card-->
                            </div><!--end col-->
                        </div><!--end row-->
                        <div class="row" id="consumer-uploads-file-card">
                            <!-- concise, professional uploads layout -->
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row text-center">
                                            <!-- File Card: Aadhaar -->
                                            <div class="col-md-4 mb-3">
                                                <div class="card h-100 shadow-sm">
                                                    <div class="card-body d-flex flex-column justify-content-between">
                                                        <div>
                                                            <div class="mb-3">
                                                                @if(isset($ppaUploads->aadhaar))
                                                                    <a href="{{ asset('uploads/aadhaar/' . $ppaUploads->aadhaar) }}" target="_blank">
                                                                        <img src="{{ asset('assets/images/widgets/aadhaar.png') }}" alt="Aadhaar" class="img-fluid" style="height:56px;">
                                                                    </a>
                                                                @else
                                                                    <img src="{{ asset('assets/images/widgets/aadhaar.png') }}" alt="Aadhaar" class="img-fluid" style="height:56px;">
                                                                @endif
                                                            </div>
                                                            <h6 class="mb-1">Aadhaar</h6>
                                                            <p class="text-muted mb-2">{{ isset($ppaUploads->aadhaar) ? basename($ppaUploads->aadhaar) : 'Not uploaded' }}</p>
                                                        </div>
                                                        <div>
                                                            @if(isset($ppaUploads->aadhaar))
                                                                <a href="{{ asset('uploads/aadhaar/' . $ppaUploads->aadhaar) }}" class="btn btn-sm btn-outline-primary mr-2" target="_blank"><i class="mdi mdi-eye"></i> View</a>
                                                            @else
                                                                <button class="btn btn-sm btn-outline-secondary" disabled>Not available</button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- File Card: Bank Details -->
                                            <div class="col-md-4 mb-3">
                                                <div class="card h-100 shadow-sm">
                                                    <div class="card-body d-flex flex-column justify-content-between">
                                                        <div>
                                                            <div class="mb-3">
                                                                @if(isset($ppaUploads->bank_details))
                                                                    <a href="{{ asset('uploads/bank/' . $ppaUploads->bank_details) }}" target="_blank">
                                                                        <img src="{{ asset('assets/images/widgets/bank.png') }}" alt="Bank" class="img-fluid" style="height:56px;">
                                                                    </a>
                                                                @else
                                                                    <img src="{{ asset('assets/images/widgets/bank.png') }}" alt="Bank" class="img-fluid" style="height:56px;">
                                                                @endif
                                                            </div>
                                                            <h6 class="mb-1">Bank Details</h6>
                                                            <p class="text-muted mb-2">{{ isset($ppaUploads->bank_details) ? basename($ppaUploads->bank_details) : 'Not uploaded' }}</p>
                                                        </div>
                                                        <div>
                                                            @if(isset($ppaUploads->bank_details))
                                                                <a href="{{ asset('uploads/bank/' . $ppaUploads->bank_details) }}" class="btn btn-sm btn-outline-primary mr-2" target="_blank"><i class="mdi mdi-eye"></i> View</a>
                                                            @else
                                                                <button class="btn btn-sm btn-outline-secondary" disabled>Not available</button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- File Card: PPA Agreement -->
                                            <div class="col-md-4 mb-3">
                                                <div class="card h-100 shadow-sm">
                                                    <div class="card-body d-flex flex-column justify-content-between">
                                                        <div>
                                                            <div class="mb-3">
                                                                @if(isset($ppaUploads->ppa_agreement))
                                                                    <a href="{{ asset('uploads/ppa/' . $ppaUploads->ppa_agreement) }}" target="_blank">
                                                                        <img src="{{ asset('assets/images/widgets/ppa.png') }}" alt="PPA" class="img-fluid" style="height:56px;">
                                                                    </a>
                                                                @else
                                                                    <img src="{{ asset('assets/images/widgets/ppa.png') }}" alt="PPA" class="img-fluid" style="height:56px;">
                                                                @endif
                                                            </div>
                                                            <h6 class="mb-1">PPA Agreement</h6>
                                                            <p class="text-muted mb-2">{{ isset($ppaUploads->ppa_agreement) ? basename($ppaUploads->ppa_agreement) : 'Not uploaded' }}</p>
                                                        </div>
                                                        <div>
                                                            @if(isset($ppaUploads->ppa_agreement))
                                                                <a href="{{ asset('uploads/ppa/' . $ppaUploads->ppa_agreement) }}" class="btn btn-sm btn-outline-primary mr-2" target="_blank"><i class="mdi mdi-eye"></i> View</a>
                                                            @else
                                                                <button class="btn btn-sm btn-outline-secondary" disabled>Not available</button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Approval / Status Area -->
                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        @if(isset($ppaUploads))
                                                            @php
                                                                $status = $ppaUploads->status ?? null;
                                                            @endphp
                                                            @if ($status == 'pending' || $status == 'seen')
                                                                <span class="badge badge-warning">Under Review</span>
                                                            @elseif ($status == 'approved')
                                                                <span class="badge badge-success">Approved</span>
                                                            @elseif ($status == 'rejected')
                                                                <span class="badge badge-danger">Rejected</span>
                                                            @else
                                                                <span class="badge badge-secondary">Not Submitted</span>
                                                            @endif
                                                            <small class="text-muted ml-3">Last updated: {{ isset($ppaUploads->updated_at) ? $ppaUploads->updated_at->diffForHumans() : 'N/A' }}</small>
                                                        @endif
                                                    </div>

                                                    <div class="text-right">
                                                        @if(isset($ppaUploads) && ($ppaUploads->status == 'pending' || $ppaUploads->status == 'seen'))
                                                            <div class="btn-group" role="group">
                                                                <button class="btn btn-success" data-toggle="modal" data-target="#approveConsumerModal">Approve</button>
                                                                <button class="btn btn-danger" data-toggle="modal" data-target="#rejectConsumerModal">Reject</button>
                                                            </div>
                                                        @elseif(isset($ppaUploads) && $ppaUploads->status == 'approved')
                                                            <div class="alert alert-success mb-0 py-2 px-3"> <i class="mdi mdi-check-all mr-1"></i> Approved</div>
                                                        @elseif(isset($ppaUploads) && $ppaUploads->status == 'rejected')
                                                            <div class="alert alert-danger mb-0 py-2 px-3"> <i class="mdi mdi-alert-outline mr-1"></i> {{ $ppaUploads->rejection_reason ?? 'Rejected' }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end row-->
                    </div>
                    <!--end general detail-->
                    <div class="tab-pane fade" id="activity_detail">
                         @include('admin.consumers.partials._ppaStatusLogs')
                        <!--end row-->
                    </div>
                    <!--end portfolio detail-->
                    <div class="tab-pane fade" id="settings_detail">
                        <div class="row">
                            @include('admin.consumers.partials._consumerUpdateDetails')
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </div>
                    <!--end settings detail-->
                </div>
                <!--end tab-content-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
    </div>

@endsection

@section('modals')
    @include('admin.consumers.partials._approveRejectConsumerModal')
@endsection

@section('otherJs')
    <script src="{{ asset('plugins/parsleyjs/parsley.min.js') }}"></script>
@endsection