@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;
    }
</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('member') }}">Member </a></li>
                <li class="breadcrumb-item active">View Lead</li>
            </ol>
            @can('Member-edit')
            <a href="{{ route('member.edit',['id' => 2] + request()->query()) }}">
                <button type="button" class="btn btn-info d-none d-lg-block m-l-15"><i class="fa fa-edit"></i> Edit</button>
            </a>
            @endcan
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-12">
                    
                </div>
                <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('leadDistribution') }}">
                                    <button type="button" class="btn btn-primary btn-sm float-right">
                                        <i class="fa fa-arrow-left"></i> Back
                                    </button>
                                </a>
                                <a onclick="myFunction();">
                                    {{-- <button type="button" class="btn btn-info btn-sm float-right mr-3"> Resend
                                    </button> --}}
                                </a>
                            </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
                                <h2>UKVD Valuation Data</h2>
                                <table>
                                    <tr><th>VRM</th><td>SA16NUX</td></tr>
                                    <tr><th>Mileage</th><td>50,000</td></tr>
                                    <tr><th>Plate Year</th><td>2016-16</td></tr>
                                    <tr><th>Vehicle Description</th><td>FIAT 500L POP</td></tr>
                                    <tr><th>OTR</th><td>13,390</td></tr>
                                    <tr><th>Dealer Forecourt</th><td>3,900</td></tr>
                                    <tr><th>Trade Retail</th><td>3,635</td></tr>
                                    <tr><th>Private Clean</th><td>3,256</td></tr>
                                    <tr><th>Private Average</th><td>3,256</td></tr>
                                    <tr><th>Part Exchange</th><td>3,120</td></tr>
                                    <tr><th>Auction</th><td>2,413</td></tr>
                                    <tr><th>Trade Average</th><td>2,837</td></tr>
                                    <tr><th>Trade Poor</th><td>2,413</td></tr>
                                </table>
                            
                                <h2>Vehicle Information</h2>
                                <table>
                                    <tr><th>Make</th><td>FIAT</td></tr>
                                    <tr><th>Model</th><td>500L POP</td></tr>
                                    <tr><th>Engine Capacity</th><td>1368cc</td></tr>
                                    <tr><th>Year of Manufacture</th><td>2016</td></tr>
                                    <tr><th>Fuel</th><td>PETROL</td></tr>
                                    <tr><th>Color</th><td>RED</td></tr>
                                    <tr><th>CO2 Emissions</th><td>143g/km</td></tr>
                                    <tr><th>Transmission</th><td>MANUAL 6 GEARS</td></tr>
                                    <tr><th>Seating Capacity</th><td>5</td></tr>
                                </table>
                            
                                <h2>Previous Keepers Detail</h2>
                                <table>
                                    <tr><th>Total Keepers</th><td>4</td></tr>
                                    <tr><th>Current Keeper</th><td>29-Aug-2024</td></tr>
                                    <tr><th>Keeper 3</th><td>25-Nov-2022</td></tr>
                                    <tr><th>Keeper 2</th><td>31-Mar-2016</td></tr>
                                    <tr><th>First Keeper</th><td>17-Mar-2016</td></tr>
                                </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">
                    <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>
@endsection
@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);
        
    });


</script>
@endpush