@extends('layouts/contentLayoutMaster')

@section('title', 'App Vehicle Price Evaluation')

@section('vendor-style')
    {{-- vednor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/datatables.min.css')) }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
@endsection
@section('mystyle')
    {{-- Page css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/pages/data-table-custom.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.css')) }}">

@endsection
@section('content')
<section id="page-content">
    @if(count($errors)>0)
        @foreach($errors->all() as $error)
            <div class="alert alert-danger">
                {{$error}}
            </div>
        @endforeach
    @endif
    @if(session('success'))
        <div class="alert alert-success">
            {{session('success')}}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">
            {{session('error')}}
        </div>
    @endif

</section>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body card-dashboard">
                        <div class="row input-daterange mb-2">
                            <div class="col-md-3">
                                <input type="date" name="from_date" id="from_date" class="form-control" placeholder="From Date" />
                            </div>
                            <div class="col-md-3">
                                <input type="date" name="to_date" id="to_date" class="form-control" placeholder="To Date" />
                            </div>
                            <div class="col-md-4">
                                <button type="button" name="filter" id="filter" class="btn btn-primary">Filter</button>
                                <button type="button" name="refresh" id="refresh" class="btn btn-default">Refresh</button>
                            </div>
                            
                        </div>
                        <div class="table-responsive">
                            <table id="app_recent_evaluation_table" class="table table-striped .data-list-view">
                                <thead>
                                <tr>
                                    <th style="width: 10%;">{{__('AVPE-ID')}}</th>
                                    <th style="width: 15%;">{{__('Customer Name')}}</th>
                                    <th style="width: 15%;">{{__('Customer Phone')}}</th>
                                    <th style="width: 15%;">{{__('Source')}}</th>
                                    <th style="width: 15%;">{{__('Make')}}</th>
                                    <th style="width: 15%;">{{__('Model')}}</th>
                                    <th style="width: 15%;">{{__('Year')}}</th>
                                    <th style="width: 15%;">{{__('Trim')}}</th>
                                    <th style="width: 15%;">{{__('Base Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Suggested Market Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Suggested Ideal Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Suggested Trade Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Formulas Applied')}}</th>
                                    <th style="width: 15%;">{{__('BillingStatus')}}</th>
                                    <th style="width: 15%;">{{__('Amount')}}</th>
                                    <th style="width: 15%;">{{__('Date')}}</th>
                                    <th class="d-none d-sm-table-cell">{{__('Actions')}}</th>
                                </tr>
                                </thead>

                                <tfoot>
                                <tr>
                                    <th style="width: 10%;">{{__('AVPE-ID')}}</th>
                                    <th style="width: 15%;">{{__('Customer Name')}}</th>
                                    <th style="width: 15%;">{{__('Customer Phone')}}</th>
                                    <th style="width: 15%;">{{__('Source')}}</th>
                                    <th style="width: 15%;">{{__('Make')}}</th>
                                    <th style="width: 15%;">{{__('Model')}}</th>
                                    <th style="width: 15%;">{{__('Year')}}</th>
                                    <th style="width: 15%;">{{__('Trim')}}</th>
                                    <th style="width: 15%;">{{__('Base Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Suggested Market Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Suggested Ideal Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Suggested Trade Price(SAR)')}}</th>
                                    <th style="width: 15%;">{{__('Formulas Applied')}}</th>
                                    <th style="width: 15%;">{{__('BillingStatus')}}</th>
                                    <th style="width: 15%;">{{__('Amount')}}</th>
                                    <th style="width: 15%;">{{__('Date')}}</th>
                                    <th class="d-none d-sm-table-cell">{{__('Actions')}}</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<style>
    div.detail {
    overflow: auto;
    }
</style>
<div class="modal fade text-left" id="inspectionDetail" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel33" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel33">Evaluation Details </h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
      <div class="modal-body">
        <br>
        <div class="col-12">
            <div class="d-flex justify-content-center">

                <img src="/images/loader.gif" id="loader" alt="" width="50%" height="50%">
            </div>
            <div class="detail" style="height: 300px">
            </div>
            
        </div>
      </div>
      
  </div>
</div>
</div>
{{-- basePriceAdd --}}
<div class="modal fade text-left" id="basePriceAdd" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel34" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel34">Add Base Price</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
      <div class="modal-body">
        <br>
        <div class="col-12">
            {{-- <div class="d-flex justify-content-center">

                <img src="/images/loader.gif" id="loader" alt="" width="50%" height="50%">
            </div> --}}
            {{-- <div class="detail" style="height: 300px">
            </div> --}}
            <span class="text-success mb-2" id="base_price_success"></span>
            <span class="text-danger mb-2" id="base_price_error"></span>
            <input type="number" step="0.1" placeholder="Base price i.e 150000" id="base_price" class="form-control">
            <button class="btn btn-primary mt-3 mb-3" id="btn-base-price">Add Now!</button>
        </div>
      </div>
      
  </div>
</div>
</div>

{{-- imageAdd --}}
<div class="modal fade text-left" id="imageAdd" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel35">Add Base Price Image</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
      <div class="modal-body">
        <br>
        <div class="col-12">
            <form id="form-image" enctype="multipart/form-data" method="post" action="price-evaluation/set-base-price-image">
                @csrf
                <span class="text-success mb-2" id="base_price_image_success"></span>
                <span class="text-danger mb-2" id="base_price_image_error"></span>
                <input type="hidden" name="image_make" id="image_make">
                <input type="hidden" name="image_model" id="image_model">
                <input type="hidden" name="image_year" id="image_year">
                <input type="hidden" name="image_trim" id="image_trim">
                <input type="file"  placeholder="Attach Image" name="vehicle_image" class="form-control" accept="image/*" required>
                <button class="btn btn-primary mt-3 mb-3" type="submit" id="btn-base-price-image">Save Now!</button>
            </form>
        </div>
      </div>
      
  </div>
</div>
</div>

@endsection
@section('vendor-script')
    {{-- vednor files --}}
    <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.bootstrap.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
@endsection
@section('myscript')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="{{ asset(mix('js/scripts/forms/select/form-select2.js')) }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script>
    $(document).ready(function () {
        loadData();
        
    });
    const loadData=(from_date = '', to_date = '')=>{
        
table = $('#app_recent_evaluation_table').DataTable({
    dom: '<"top"<"actions action-btns"B><"action-filters"lf>>rt<"d-flex justify-content-between"ip>'
    , oLanguage: {
        sLengthMenu: "_MENU_"
        , sSearch: ""
    }
    , lengthMenu: [
        [10, 25, 50,10000, -1]
        , [10, 25, 50,10000, "All"]
    ]
    , buttons: [{
            extend: 'csvHtml5'
            , exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'excelHtml5',
            text:'Excel',
                exportOptions: {
                    columns: [1,2,3,4,5,6,9,10,11,12,13,14,15]
                }
        }
    ]
    , initComplete: function (settings, json) {
        $(".dt-buttons .btn-primary").removeClass("btn-secondary");
    }
    , processing: true
    , serverSide: true
    , "language": {
        "processing": "<div class='fa-3x'><i class='fa fa-circle-notch fa-spin text-success'></i></div>"
    }
    , "ajax": {
        "url": "/app/price-evaluation/show-recent"
        ,
        data:{from_date:from_date, to_date:to_date}
    },
    "columnDefs": [{
    "defaultContent": "-",
    "targets": "_all"
    }]
    , order: [0, 'desc']
    , columns: @json($columns)
});
}
</script>
<script>
$(function(){
    $(document).on('click', '.customer-detail', function (e) {
        $("#loader").show();
        $(".detail").html('');
        var vpeId=$(this).attr('data');

        $.ajax({
                    url:"/price-evaluation/show-customer-details",
                    type:'get',
                    data: {vpeId: vpeId,_token: "{{ csrf_token() }}",},
                    dataType: 'json',
                    "headers": {
                    "accept": "application/json",
                    "Access-Control-Allow-Origin":"*"
                    },
                    success: function (res) {
                        $("#loader").hide();
                        $(".detail").html('');
                        var customer_name=res.customer_name==undefined ?'NA':res.customer_name;
                        var customer_email=res.customer_email==undefined ?'NA':res.customer_email;
                        var email=res.customer_email==undefined || res.customer_email=='NA'?'':res.customer_email;
                        var customer_mobile=res.customer_mobile==undefined ?'NA':res.customer_mobile;
                        $(".detail").html(`<div>
                        <h4>Send Pdf link</h4>
                        <form action="/price-evaluation/send-email" method="post">
                        @csrf
                        <div class="p-2">
                        <input type="email" name="email" class="form-control" value="`+email+`" placeholder="Enter customer email">
                        <input type="hidden" name="pdf_id" value="`+vpeId+`">
                        <button class="btn btn-primary mt-2"><i class="feather icon-message-square"></i> Send</button>
                        </div>
                        
                        </form>
                        </div>
                        
                        <table class="table table-hover">
                            <thead>
                            <tr>
                            <th scope="col">#</th>
                            <th scope="col">Customer Details</th>
                            <th scope="col">Selection</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                            <th scope="row">1</th>
                            <td>Customer Name</td>
                            <td>`+ customer_name +`</td>
                            </tr>
                            <tr>
                            <th scope="row">2</th>
                            <td>Customer Email</td>
                            <td>`+ customer_email +`</td>
                            </tr>
                            <tr>
                            <th scope="row">3</th>
                            <td>Customer Mobile</td>
                            <td>`+ customer_mobile +`</td>
                            </tr>
                            </tbody>
                            </table>` );
                     },error: function (error) {
                            console.log(error);
                            $("#loader").hide();
                            $(".detail").html('');
                        }
                })
    });
    //
    $(document).on('click', '.inspection-detail', function (e) {
                $("#loader").show();
                $(".detail").html('');
                var vpeId=$(this).attr('data');
                $.ajax({
                    url:"/price-evaluation/show-details",
                    type:'get',
                    data: {vpeId: vpeId,_token: "{{ csrf_token() }}",},
                    dataType: 'json',
                    "headers": {
                    "accept": "application/json",
                    "Access-Control-Allow-Origin":"*"
                    },
                    success: function (res) {
                        $("#loader").hide();
                        $(".detail").html('');
                        var mileage=res.mileage==undefined ?'NA':res.mileage;
                        var origin=res.origin==undefined ?'NA':res.origin;
                        var dealer=res.dealer==undefined ?'NA':res.dealer;
                        var accidents=res.accidents==undefined ?'NA':res.accidents;
                        var warranty=res.warranty==undefined ?'NA':res.warranty;
                        var ct_score=res.ct_score==undefined ?'NA':res.ct_score;
                        // var Vat_Purchase=res.Vat_Purchase==undefined ?'NA':res.Vat_Purchase;
                        // var location=res.location==undefined ?'NA':res.location;
                        var FaceLift=res.FaceLift==undefined ?'NA':res.FaceLift;
                        var NewModel=res.NewModel==undefined ?'NA':res.NewModel;
                        var certified=res.certified==undefined ?'NA':res.certified;
                        var modified=res.modified==undefined ?'NA':res.modified;
                        var Service_Contract=res.Service_Contract==undefined ?'NA':res.Service_Contract;
                        var maintenanceHistory=res.maintenanceHistory==undefined ?'NA':res.maintenanceHistory;
                        var color=res.maintenanceHistory==undefined ?'NA':res.color;
                        var purposeOfUse=res.maintenanceHistory==undefined ?'NA':res.purposeOfUse;
                        $(".detail").html(`
                        
                            <table class="table table-hover">
            <thead>
            <tr>
            <th scope="col">#</th>
            <th scope="col">Evaluation Criteria</th>
            <th scope="col">Selection</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <th scope="row">1</th>
            <td>Vehicle Mileage</td>
            <td>`+ mileage +`</td>
            </tr>
            <tr>
            <th scope="row">2</th>
            <td>Origin </td>
            <td>`+ origin +`</td>
            </tr>
            <tr>
            <th scope="row">3</th>
            <td>Market Demand</td>
            <td>`+ dealer +`</td>
            </tr>
            <tr>
            <th scope="row">4</th>
            <td>Accidents</td>
            <td>`+ accidents +`</td>
            </tr>
            <tr>
            <th scope="row">5</th>
            <td>Maintenance History</td>
            <td>`+maintenanceHistory+`</td>
            </tr>
            <tr>
            <th scope="row">6</th>
            <td>FaceLift</td>
            <td>`+FaceLift+`</td>
            </tr>
            <tr>
            <th scope="row">7</th>
            <td>NewModel</td>
            <td>`+NewModel+`</td>
            </tr>
            <tr>
            <th scope="row">8</th>
            <td>Certified</td>
            <td>`+certified+`</td>
            </tr>
            <tr>
            <th scope="row">8</th>
            <td>Modified</td>
            <td>`+modified+`</td>
            </tr>
            <tr>
            <th scope="row">8</th>
            <td>Service Contract</td>
            <td>`+Service_Contract+`</td>
            </tr>
            <tr>
            <th scope="row">9</th>
            <td>Warranty</td>
            <td>`+warranty+`</td>
            </tr>
            <tr>
            <th scope="row">11</th>
            <td>CT Score</td>
            <td>`+ct_score+`</td>
            </tr>
            <tr>
            <th scope="row">13</th>
            <td>Color</td>
            <td>`+color+`</td>
            </tr>
            <tr>
            <th scope="row">14</th>
            <td>Purpose of Use</td>
            <td>`+purposeOfUse+`</td>
            </tr>
            </tbody>
            </table>` );
                    },
                    error: function (error) {
                        console.log(error);
                        $("#loader").hide();
                        $(".detail").html('');
                    }
                });
        
        });


});
$('#filter').click(function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
    if(from_date != '' &&  to_date != '')
    {
    $('#app_recent_evaluation_table').DataTable().destroy();
        loadData(from_date, to_date);
    }else
    {
        alert('Both Date is required');
    }
});

$('#refresh').click(function(){
    $('#from_date').val('');
    $('#to_date').val('');
    $('#app_recent_evaluation_table').DataTable().destroy();
    loadData();
});
</script>
@endsection