@extends('backend.layouts.app')

@section('content')
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }
        .select2-container {
            width: 100% !important;
        }
        .json-container {
            max-height: 300px;
            /* max height */
            max-width: 600px;
            /* max width */
            overflow: auto;
            /* scroll if content overflows */
            background: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 13px;
            white-space: pre-wrap;
            /* wrap lines */
            word-break: break-word;
        }
    </style>
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">View Lead </h4>
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item "><a href="{{ route('fullValuation.lead.list') }}">Lead Full Valuation </a></li>
                    <li class="breadcrumb-item active">View Lead</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="content-wrapper">
            <section class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title" style="width:100%;display: inline-block;">
                                    <span class="caption-subject font-green bold uppercase">View Lead</span>
                                    <a href="{{ route('fullValuation.lead.list') }}">
                                        <button type="button" class="btn btn-primary btn-sm float-right">
                                            <i class="fa fa-arrow-left"></i> Back
                                        </button>
                                    </a>
                                    @if($lead->vehicle_data_json)
                                    <a onclick="myFunction();">
                                        <button type="button" class="btn btn-info btn-sm float-right mr-3"> Resend
                                        </button>
                                    </a>
                                    @endif
                                </div>
                                @if (session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert"><i
                                            class="far fa-check-circle"></i>
                                        {{ session('success') }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif
                                @if (session('error'))
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert"><i
                                            class="far fa-check-circle"></i>
                                        {{ session('error') }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif

                                <table id="user" class="table table-bordered table-striped">
                                    <tbody>
                                        <tr>
                                            <th style="width:230px">Reference No.</th>
                                            <td>{{ $lead->reference_number ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th>VRM</th>
                                            <td>{{ $lead->vrm ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Make</th>
                                            <td>{{ $lead->make ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Model</th>
                                            <td>{{ $lead->model ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Mileage</th>
                                            <td>{{ $lead->mileage ?? '-' }}</td>
                                        </tr>


                                        <tr>
                                            <th>Fuel</th>
                                            <td>{{ $lead->fuel ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Colour</th>
                                            <td>{{ $lead->colour ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Valuation</th>
                                            <td>{{ $lead->min_value . '-' . $lead->max_value }}</td>
                                        </tr>

                                        <tr>
                                            <th>Name</th>
                                            <td>{{ $lead->name ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Email</th>
                                            <td>{{ $lead->email ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Post Code</th>
                                            <td>{{ $lead->post_code ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th>City</th>
                                            <td>{{ $lead->city ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>VIN Number</th>
                                            <td>{{ $lead->vin ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Type</th>
                                            <td>{{ $lead->type ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Class</th>
                                            <td>{{ $lead->vehicle_class ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>IP Address</th>
                                            <td>{{ $lead->ip ?? '-' }}</td>
                                        </tr>


                                        <tr>
                                            <th>IP Total</th>
                                            <td>{{ $lead->ipHits ? count($lead->ipHits) : '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Em Total</th>
                                            <td>{{ $lead->emailCount?->count() ?? '' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Mobile Total</th>
                                            <td>{{ $lead->mobileCount?->count() ?? '' }}</td>
                                        </tr>

                                        <tr>
                                            <th>VRM Count</th>
                                            <td>{{ $lead->vrmCount?->count() ?? '' }}</td>
                                        </tr>


                                        <tr>
                                            <th style="width:230px">Post Code</th>
                                            <td>{{ $lead->post_code ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th>City</th>
                                            <td>{{ $lead->city ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>Additional Informatin</th>
                                            <td>{{ $lead->additional_information ?? '-' }}
                                            </td>
                                        </tr>

                                        <tr>
                                            <th>Created At</th>
                                            <td>{{ $lead->created_at->format(config('GET.admin_date_time_format')) ?? '-' }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Updated At</th>
                                            <td>{{ $lead->updated_at->format(config('GET.admin_date_time_format')) ?? '-' }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Status</th>
                                            <td>
                                                @if ($lead->status == 1)
                                                    <span class="label label-success label-rounded"
                                                        style="color: white;">Distributed</span>
                                                @else
                                                    <span class="label label-danger label-rounded">Undistributed</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Schema Valuation data</th>
                                            <td>
                                                <div class="json-container">
                                                    <pre id="valuationJsonContent">{{ $valuationJson ?? '-' }}</pre>
                                                </div>
                                                <button onclick="copyJson('valuationJsonContent')"
                                                    class="btn btn-sm btn-primary" style="margin-top:5px;">Copy
                                                    JSON</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div id="statusModal" class="modal fade" role='dialog'>
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('triggeredDistribution', $lead->id) }}">
                    <div class="modal-body">
                        <select name="member_id[]" multiple class="form-control" id="member">
                            @foreach ($members as $memberid => $member)
                                <option value="{{ $memberid }}">{{ $member }}</option>
                            @endforeach
                        </select>
                        <br>
                        <div id="checkboxes" class="mt-2">
                            <div style="float: right;">
                                <input type="checkbox" id="pdf_members" name="pdf_members"> PDF Members
                            </div>
                            <div>
                                <input type="checkbox" id="all_members" name="all_members" class="mr-8" checked> All
                                Members
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <span id='changestatus'><button class="btn btn-success"
                                    style="color:white;">Submit</button></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>



@stop
@push('custom-script')
    {{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script> --}}
    <script>
        function myFunction() {
            $('#statusModal').modal();
        }

        $(document).ready(function() {
            $('#member').select2({
                placeholder: "Select Members",
                allowClear: true
            });
        });


        document.addEventListener("DOMContentLoaded", function() {
            const memberSelect = document.getElementById("member");
            const pdfCheckbox = document.getElementById("pdf_members");
            const allCheckbox = document.getElementById("all_members");
            const checkboxesDiv = document.getElementById("checkboxes");

            function updateVisibility() {
                const hasSelection = memberSelect.selectedOptions.length > 0;
                if (hasSelection) {
                    // Uncheck and hide checkboxes
                    pdfCheckbox.checked = false;
                    allCheckbox.checked = false;
                    checkboxesDiv.style.display = "none";
                } else {
                    // Show checkboxes
                    checkboxesDiv.style.display = "block";
                }
            }

            $('#member').on('change', function() {
                updateVisibility();
            });


            memberSelect.addEventListener("change", function() {
                if (this.selectedOptions.length > 0) {
                    pdfCheckbox.checked = false;
                    allCheckbox.checked = false;
                }
            });
            // When PDF Members checkbox is clicked
            pdfCheckbox.addEventListener("change", function() {
                if (this.checked) {
                    allCheckbox.checked = false;
                    $('#member').val(null);
                    updateVisibility();
                }
            });

            // When All Members checkbox is clicked
            allCheckbox.addEventListener("change", function() {
                if (this.checked) {
                    pdfCheckbox.checked = false;
                    $('#member').val(null);
                    updateVisibility();
                }
            });

            console.log('memberSelect', memberSelect);

        });

        function copyJson(id) {
            const jsonContent = document.getElementById(id).innerText;
            navigator.clipboard.writeText(jsonContent).then(() => {
                // alert('JSON copied to clipboard!');
            }).catch(err => {
                // alert('Failed to copy JSON: ' + err);
            });
        }
    </script>
@endpush
