@extends('layouts.app')

@section('content')
<style type="text/css">
    .bs-vertical-wizard {
        border-right: 1px solid #eaecf1;
        padding-bottom: 50px;
    }

    .bs-vertical-wizard ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bs-vertical-wizard ul>li {
        display: block;
        position: relative;
    }

    .bs-vertical-wizard ul>li>div {
        display: block;
        padding: 10px 10px 10px 40px;
        color: #3a4e33;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: .8px;
    }


    .bs-vertical-wizard ul>li>div:before {
        content: '';
        position: absolute;
        width: 1px;
        height: calc(100% - 25px);
        background-color: #bdc2ce;
        left: 13px;
        bottom: -9px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>div .ico {
        pointer-events: none;
        font-size: 18px;
        position: absolute;
        left: 5px;
        top: 12px;
        z-index: 2;
    }

    .bs-vertical-wizard ul>li>div:after {
        content: '';
        position: absolute;
        border: 2px solid #bdc2ce;
        border-radius: 50%;
        top: 14px;
        left: 6px;
        width: 16px;
        height: 16px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>div .desc {
        display: block;
        color: #78797c;
        font-size: 12px;
        /*font-weight: 400;*/
        line-height: 1.8;
        height: auto !important;
        letter-spacing: .8px;
        padding: 10px;
        background-color: #ffffff;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .bs-vertical-wizard ul>li.complete>div:before {
        background-color: #ffffff;
        opacity: 1;
        height: calc(100% - 25px);
        bottom: -9px;
    }

    .bs-vertical-wizard ul>li.complete>div:after {
        display: none;
    }

    .bs-vertical-wizard ul>li>div .ico.ico-green {
        color: #5cb85c;
    }


    .bs-vertical-wizard ul>li>a {
        display: block;
        padding: 10px 10px 10px 40px;
        color: #000000;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: .8px;
    }

    .bs-vertical-wizard ul>li>a:before {
        content: '';
        position: absolute;
        width: 1px;
        height: calc(100% - 25px);
        background-color: #bdc2ce;
        left: 13px;
        bottom: -9px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>a .ico {
        pointer-events: none;
        font-size: 14px;
        position: absolute;
        left: 10px;
        top: 15px;
        z-index: 2;
    }

    .bs-vertical-wizard ul>li>a:after {
        content: '';
        position: absolute;
        border: 2px solid #bdc2ce;
        border-radius: 50%;
        top: 14px;
        left: 6px;
        width: 16px;
        height: 16px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>a .desc {
        display: block;
        color: #bdc2ce;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: .8px;
        height: auto !important;
    }

    .bs-vertical-wizard ul>li.complete>a:before {
        background-color: #5cb85c;
        opacity: 1;
        height: calc(100% - 25px);
        bottom: -9px;
    }

    .bs-vertical-wizard ul>li.complete>a:after {
        display: none;
    }

    .bs-vertical-wizard ul>li.locked>a:after {
        display: none;
    }

    .bs-vertical-wizard ul>li:last-child>a:before {
        display: none;
    }

    .bs-vertical-wizard ul>li.complete>a .ico {
        left: 8px;
    }

    .bs-vertical-wizard ul>li>a .ico.ico-green {
        color: #5cb85c;
    }

    .bs-vertical-wizard ul>li>a .ico.ico-muted {
        color: #bdc2ce;
    }

    .bs-vertical-wizard ul>li.current {
        background-color: #fff;
    }

    .bs-vertical-wizard ul>li.current>a:before {
        background-color: #ffe357;
        opacity: 1;
    }

    .bs-vertical-wizard ul>li.current>a:after {
        border-color: #ffe357;
        background-color: #ffe357;
        opacity: 1;
    }

    .bs-vertical-wizard ul>li.current:after,
    .bs-vertical-wizard ul>li.current:before {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .bs-vertical-wizard ul>li.current:after {
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        border-width: 10px;
        margin-top: -10px;
    }

    .bs-vertical-wizard ul>li.current:before {
        border-color: rgba(234, 236, 241, 0);
        border-left-color: #eaecf1;
        border-width: 11px;
        margin-top: -11px;
    }
</style>


<style>
    a {
        color: #f96332;
    }

    a:hover,
    a:focus {
        color: #f96332;
    }

    p {
        line-height: 1.61em;
        font-weight: 300;
        font-size: 1.2em;
    }

    .category {
        text-transform: capitalize;
        font-weight: 700;
        color: #9A9A9A;
    }

    .nav-item .nav-link,
    .nav-tabs .nav-link {
        -webkit-transition: all 300ms ease 0s;
        -moz-transition: all 300ms ease 0s;
        -o-transition: all 300ms ease 0s;
        -ms-transition: all 300ms ease 0s;
        transition: all 300ms ease 0s;
    }

    .card a {
        -webkit-transition: all 150ms ease 0s;
        -moz-transition: all 150ms ease 0s;
        -o-transition: all 150ms ease 0s;
        -ms-transition: all 150ms ease 0s;
        transition: all 150ms ease 0s;
    }


    .nav-tabs {
        border: 0;
        margin: 15px 0.7rem;
    }

    .nav-tabs:not(.nav-tabs-neutral)>.nav-item>.nav-link.active {
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3);
    }

    .card .nav-tabs {
        border-top-right-radius: 0.1875rem;
        border-top-left-radius: 0.1875rem;
    }

    .nav-tabs>.nav-item>.nav-link {
        color: #888888;
        margin: 0;
        margin-right: 5px;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 30px;
        font-size: 14px;
        padding: 10px 20px;
        line-height: 1.5;
    }

    .nav-tabs>.nav-item>.nav-link:hover {
        background-color: transparent;
    }

    .nav-tabs>.nav-item>.nav-link.active {
        /* background-color: #444; */
        background: linear-gradient(to bottom right, #9e88f5 0%, #6259ca 100%);
        border-radius: 30px;
        color: #FFF;
    }

    .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        font-size: 14px;
        position: relative;
        top: 1px;
        margin-right: 3px;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link {
        color: #FFFFFF;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link.active {
        background-color: rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
    }

    .card {
        border: 0;
        border-radius: 0.1875rem;
        display: inline-block;
        position: relative;
        width: 100%;
        /* margin-bottom: 30px; */
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
    }

    .card .card-header {
        background-color: transparent;
        border-bottom: 0;
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }

    .card[data-background-color="orange"] {
        background-color: #f96332;
    }

    .card[data-background-color="red"] {
        background-color: #FF3636;
    }

    .card[data-background-color="yellow"] {
        background-color: #FFB236;
    }

    .card[data-background-color="blue"] {
        background-color: #2CA8FF;
    }

    .card[data-background-color="green"] {
        background-color: #15b60d;
    }

    [data-background-color="orange"] {
        background-color: #e95e38;
    }

    [data-background-color="black"] {
        background-color: #2c2c2c;
    }

    [data-background-color]:not([data-background-color="gray"]) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) p {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        color: #FFFFFF;
    }

    @media screen and (max-width: 768px) {

        .nav-tabs {
            display: inline-block;
            width: 100%;
            padding-left: 100px;
            padding-right: 100px;
            text-align: center;
        }

        .nav-tabs .nav-item>.nav-link {
            margin-bottom: 5px;
        }
    }
</style>



<style type="text/css">
    p {
        margin-bottom: 7px;
    }

    .green {
        color: rgb(128, 75, 0);
        font-size: 14px;
    }
</style>

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Site <small>Details</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Site Details</li>
        </ol>
    </div>

    {{-- <div class="float-end">
            <a class="btn btn-primary float-right" href="{{ url('leads') }}"> <i class="fa fa-arrow-left"></i> All Lead</a>
</div> --}}

</div>
<!-- PAGE-HEADER END -->

<div class="content mt-3">


    @if ($message = Session::get('success'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Greate Job!</strong> {{ $message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif



    <div class="row">
        <div class="col-md-12 ml-auto mr-auto">
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="basic" role="tabpanel">
                        <style>
                            .title {

                                line-height: 30px;
                                font-size: 14px;
                                margin-bottom: 13px;
                                clear: both;
                            }

                            .title .value {
                                float: right;
                            }
                        </style>
                        <div class="row">
                            <div class="col-sm-5">

                                <div class="card">
                                    <div class="card-body">
                                        <h4>Account Details</h4>

                                        <div class="title mb-2">
                                            <span class="text-muted">Account Name:</span>
                                            <span
                                                class="value">{{ $account->first_name . ' ' . $account->last_name }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Phone:</span>
                                            <span class="value">{{ $account->primary_phone_no }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Email:</span>
                                            <span class="value">{{ strtolower($account->primary_email) }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Address:</span>
                                            <span class="value">{{ $account->address }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-5">
                                    <div class="card-body">
                                        <h4>Site Beneficiary Details</h4>
                                        @if($beneficiary)
                                        <div class="title mb-2">
                                            <span class="text-muted">SITE ID:</span>
                                            <span class="value">{{ $beneficiary->lead_id }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">GSTIN:</span>
                                            <span class="value">{{ $beneficiary->gstin }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Business Type:</span>
                                            <span class="value">{{ $beneficiary->business_type }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Name:</span>
                                            <span class="value">{{ $beneficiary->name }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Address:</span>
                                            <span class="value">{{ $beneficiary->address }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Billing Address:</span>
                                            <span class="value">{{ $beneficiary->billing_address }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Shipping Address:</span>
                                            <span class="value">{{ $beneficiary->shipping_address }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Contact Person Name:</span>
                                            <span class="value">{{ $beneficiary->contact_person_name }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Contact Person Phone:</span>
                                            <span class="value">{{ $beneficiary->contact_person_phone }}</span>
                                        </div>

                                        <div class="title mb-2">
                                            <span class="text-muted">Contact Person Email:</span>
                                            <span
                                                class="value">{{ strtolower($beneficiary->contact_person_email) }}</span>
                                        </div>
                                        @else
                                        <p>No beneficiary details available.</p>
                                        @endif
                                    </div>
                                </div>

                            </div>

                            <div class="col-sm-7 side-content">
                                <h4>Comments</h4>

                                {{ Form::open(['url' => '/lead/comment/store']) }}
                                @csrf
                                {{ Form::hidden('lead_id_fk', $data->id) }}
                                <div class="form-group">
                                    {{ Form::textarea('comment', '', ['class' => 'form-control', 'required' => '', 'placeholder' => 'Leave Your Comment', 'rows' => 3]) }}
                                </div>

                                {{ Form::submit('Submit', ['class' => 'btn btn-dark']) }}
                                {{ Form::close() }}



                                <div class="bs-vertical-wizard">
                                    <ul>
                                        <li class="complete">
                                            <div>Comments
                                                @foreach ($comments as $row)
                                                <div class="desc">
                                                    <p>
                                                        <strong class="green"><i
                                                                class="fa fa-comments"></i>&nbsp;&nbsp;
                                                            Comment</strong>

                                                        <small><span
                                                                class="float-right">{{ date('d M, Y H:i', strtotime($row->created_at)) }}</span></small>
                                                    </p>
                                                    <p>{{ $row->comment }} <span class="float-right"><small><em> -
                                                                    By
                                                                    {{ $row->user->name }}</em></small></span>
                                                    </p>
                                                </div>
                                                @endforeach
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>



                        </div>
                        <div class="card mt-4">
                            <div class="card-body">
                                <h4>Roof Inspection Images</h4>
                                <div class="row">
                                    @foreach ([
                                    'facing_south' => 'Facing South',
                                    'facing_north' => 'Facing North',
                                    'facing_west' => 'Facing West',
                                    'roof_layout' => 'Roof Layout'
                                    ] as $field => $label)
                                    @if (!empty($sitedetail->$field))
                                    <div class="col-md-3 mb-3">
                                        <strong>{{ $label }}</strong>
                                        <img src="{{ asset('storage/' . $sitedetail->$field) }}"
                                            class="img-fluid img-thumbnail"
                                            alt="{{ $label }}"
                                            style="cursor: pointer;"
                                            onclick="showFullImage('{{ asset('storage/' . $sitedetail->$field) }}')">
                                    </div>
                                    @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <!-- Fullscreen Image Overlay -->
                        <div id="fullImageOverlay" style="
    display: none;
    position: fixed;
    top:0; left:0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1050;
    justify-content: center;
    align-items: center;
    flex-direction: column;
">
                            <span id="closeOverlay" style="
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 40px;
        color: white;
        cursor: pointer;
        z-index: 1100;
    ">&times;</span>

                            <img id="fullImage" src="" style="
        max-width: 90vw;
        max-height: 90vh;
        border-radius: 8px;
        box-shadow: 0 0 20px black;
    ">
                        </div>


                    </div>

                </div>
            </div>

        </div>
    </div>

</div>
@endsection


@section('scripting')
<script type="text/javascript">
    function showFullImage(src) {
        document.getElementById('fullImage').src = src;
        document.getElementById('fullImageOverlay').style.display = 'flex';
    }

    document.getElementById('closeOverlay').addEventListener('click', function() {
        document.getElementById('fullImageOverlay').style.display = 'none';
    });

    // Optional: Close on ESC
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.getElementById('fullImageOverlay').style.display = 'none';
        }
    });
</script>
@endsection