@extends('backend.layouts.app')

@section('content')
    <style>
        table th,
        table td {
            white-space: nowrap;
            /* Prevents text from wrapping to a new line */
        }

        .action-buttons {
            display: flex;
            align-items: center;
            /* vertically center buttons */
            gap: 5px;
            /* spacing between buttons */
        }

        .action-buttons .send-mail-btn {
            float: none;
            /* remove float */
            margin-left: 0;
            /* remove margin if you want */
        }
        .dt-buttons {
            float: right !important;
        }
    </style>

    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Lead Full Valuation</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 active">Lead Full Valuation</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="col-md-12">
                                    <form action="{{ route('fullValuation.lead.list') }}" method="get" id="custom-filter-form">
                                        <div class="align-items-start">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div>
                                                        <select name="type" id="type" class="form-control">
                                                            <option value=""
                                                                {{ request('type') == '' ? 'selected' : '' }}>All</option>
                                                            <option value="DIRECT"
                                                                {{ request('type') == 'DIRECT' ? 'selected' : '' }}>
                                                                Direct</option>

                                                            {{-- <option value="DISTRIBUTED"
                                                                {{ request('type') == 'DISTRIBUTED' ? 'selected' : '' }}>
                                                                Distributed</option>

                                                            <option value="UNDISTRIBUTED"
                                                                {{ request('type') == 'UNDISTRIBUTED' ? 'selected' : '' }}>
                                                                UnDistributed</option> --}}
                                                            <option value="STD"
                                                                {{ request('type') == 'STD' ? 'selected' : '' }}>STD
                                                            </option>
                                                            <option value="STMD"
                                                                {{ request('type') == 'STMD' ? 'selected' : '' }}>STMD
                                                            </option>
                                                                                                                            <option value="STDPDF"
                                                                {{ request('type') == 'STDPDF' ? 'selected' : '' }}>
                                                                STDPDF</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div>
                                                        <select name="area_id[]" id="area_id" multiple
                                                            class="form-control mr-2">
                                                            <option value="">All Areas</option>
                                                            @foreach ($areas as $area)
                                                                <option value="{{ $area->id }}"
                                                                    {{ in_array($area->id, (array) request('area_id')) ? 'selected' : '' }}>
                                                                    {{ $area->code . ' - ' . $area->name }}
                                                                </option>
                                                               
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 d-flex gap-2" style="margin-bottom: 2rem;">
                                                    <button class="btn btn-sidebar btn btn-secondary w-100" type="submit">
                                                        <i class="fas fa-search fa-fw"></i>
                                                    </button>
                                                    <a href="{{ route('fullValuation.lead.list') }}" class="btn btn-secondary w-100"
                                                        title="Reload" id="reset-filter">
                                                        <i class="fas fa-sync"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <br>
                                <div class="table-responsive">
                                     {{ $dataTable->table(['class' => 'table table-bordered table-hover', 'style' => 'width:100%;', 'id' => 'leads-table']) }}
                                    {{-- <table id="user" class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>S. No.</th>
                                                <th class="vertical-text">@sortablelink('reference_number', 'Reference No')</th>
                                                <th>@sortablelink('post_code', 'Post Code')</th>
                                                <th>@sortablelink('city', 'City')</th>
                                                <th>@sortablelink('vrm', 'VRM')</th>
                                                <th>@sortablelink('make', 'Make')</th>
                                                <th>@sortablelink('model', 'Model')</th>
                                                <th>@sortablelink('min_value', 'Valuation')</th>
                                                <th>@sortablelink('mileage', 'Mileage')</th>
                                                <th>@sortablelink('created_at', 'Date')</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="memberTable">
                                            @foreach ($leads as $lead)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $lead->reference_number != null ? $lead->reference_number : '-' }}
                                                    </td>
                                                    <td>{{ $lead->post_code }}</td>
                                                    <td>{{ $lead->city }}</td>
                                                    <td>{{ $lead->vrm }}</td>
                                                    <td>{{ $lead->make }}</td>
                                                    <td>{{ $lead->model }}</td>
                                                    <td>{{ $lead->min_value . '-' . $lead->max_value }}</td>
                                                    <td>{{ $lead->mileage }}</td>
                                                    <td>{{ $lead->created_at }}</td>
                                                    <td class="action-buttons">
                                                        <a href="{{ route('lead.show', $lead->id) }}">
                                                            <button class="btn btn-info btn-sm" title="view"><i
                                                                    class="fas fa-eye"></i></button>
                                                            <a href="{{ route('lead.mail.template', $lead->id) }}"
                                                                style="float: right; margin-left: 3px;" type="button"
                                                                class="btn btn-info btn-sm" title="Send Mail"> <i
                                                                    class="fas fa-envelope"></i></a>
                                                            <button type="button"
                                                                onclick="customMessagePopup({{ $lead->id }})"
                                                                class="btn btn-success btn-sm" title="Message"><i
                                                                    class="fas fa-comment"></i></button>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table> --}}
                                                                        <div>
                                        <label for="goToPageInput">Go to Page:</label>
                                        <input type="number" id="goToPageInput" min="1" style="width: 60px;">
                                        <button id="goToPageBtn" class="btn btn-sm btn-primary">Go</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </section>
    </div>
    </div>
    <div id="messageModal" class="modal fade" role='dialog'>
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="msgbox" action="{{ route('lead.message.send') }}" method="post">
                    @csrf
                    <input type="hidden" id="lead_id" name="lead_id">
                    <div class="modal-body">
                        <div class="form-group">
                            {{-- <label for="">Type your text here</label> --}}
                            <textarea name="text" id="" cols="30" rows="10" class="form-control" placeholder="Type here..."
                                required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-info">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop
@push('custom-script')
{!! $dataTable->scripts() !!}
    <script>
        $(document).ready(function() {
            $('#area_id').select2({
                placeholder: "Area(s)",
                allowClear: true
            });

             var DataaTable = $('#leads-table').DataTable();

            $(document).on('submit', '#custom-filter-form', function(e) {
                
                e.preventDefault();
                var type = $('#type').val() || '';
                var area_id = $('#area_id').val() || '';

                var params = {
                    type: type,
                    area_id: area_id,
                };

                DataaTable.ajax.url("{{ route('fullValuation.lead.list') }}?" + $.param(params)).load();
            });

            $(document).on('click', '#reset-filter', function(e) {
                e.preventDefault();
                $('#custom-filter-form')[0].reset();
                var url = "{{ route('fullValuation.lead.list') }}";
                DataaTable.ajax.url(url).load();
            });
            
        });

      

        function customMessagePopup(id) {

            // if(selectedUsers.size===0){
            //     errorPopup();
            //     return false;
            // }
            document.getElementById('lead_id').value = id;
            new bootstrap.Modal(document.getElementById('messageModal')).show();

            //  document.getElementById('mailTemplateForm').submit();
        }


         $(document).ready(function() {
            var table = $('#leads-table').DataTable();
            $('#goToPageBtn').on('click', function() {
                var pageNumber = parseInt($('#goToPageInput').val(), 10);

                if (!isNaN(pageNumber) && pageNumber > 0 && pageNumber <= table.page.info().pages) {
                    table.page(pageNumber - 1).draw('page');
                } else {
                    alert('Invalid page number');
                }
            });
        });
        
    </script>
@endpush
