@extends('template.app')

@section('meta') 
@endsection

@section('title')
    OBF
@endsection

@section('styles')
<style>
     .highlight {
        background-color: #ffff99; 
    }
    #data-table.dataTable tbody td {
        padding: 0px !important;
        height: 20px !important;
        line-height: 35px !important;
        font-size: 15px !important;
        text-align: center;
    }
</style>
@endsection
@section('content')
@php
 if(Auth::user()->roles->pluck('name') == 'fasttag')
@endphp
<style>
    #data-table td {
        white-space: nowrap;
        padding: 0.5rem !important;
        font-size: 15px;
    }

    .select2-container .select2-selection--single
    {
     
      height: 30px;
    }
    .mt-2
    {
        font-size: 15px;
        margin-left: 15px;
    }
    
    .custom-select {
        width: 200px !important;
    }
    
    .custom-form-spacing {
      margin-bottom: -19px;
    }
</style>
<div class="page-breadcrumb">
    
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">OBF</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('obf') }}" class="text-muted">OBF</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                <!-- Import -->
                     <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" data-toggle="modal" data-target="#exampleModal" href="Javascript:void(0)">Import</a> 
                <!-- Import -->
                <!-- Export -->
                    <!-- <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Export</button> -->
                <!-- Export -->
                @canany(['obf-create'])
                    <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('obf.create') }}">Add New</a>
                   
                @endcanany
                <!-- <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ url('/example-xlsx/obf_sample.xlsx') }}">Example Excel</a> -->
            </div>
        </div>
        <div class="col-sm-8"></div>
        <div class="col-sm-4">
            <div class="col-md-12 align-self-center collapse" id="collapseExample">
                <div class="customize-input float-right">
                    <form action="{{ route('obf.export') }}" method="get">
                        <div class="row">
                            <div class="form-group col-md-6 ">
                                <select name="slug" class="form-control" required>
                                    <option value="">Select Status</option>
                                    <option value="all">All</option>
                                    <option value="pending">Pending</option>
                                    <option value="accepted">Accepted</option>
                                    <option value="obf_accepted">OBF Accepted</option>
                                    <option value="account_accepted">Account Accepted</option>
                                    <option value="obf_rejected">OBF Accepted</option>
                                    <option value="account_rejected">Account Accepted</option>
                                    <option value="rejected">Rejected</option>
                                    <option value="deleted">Deleted</option>
                                    <option value="completed">Completed</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
             <form action="#" name="form" id="form" method="post" enctype="multipart/form-data">
                @csrf
                @method('POST')
                 <div class="row">
                   
                      <div class="col-md-2  mt-2 custom-form-spacing">
                        <!--<label>Customer Name :- </label>-->
                       <select class="custom-select js-example-basic-single" name="client" id="client">
                        <option value="">Select Customer Name</option>
                        @foreach($customer_name as $name)
                        <option value="{{$name->customer_name}}">{{$name->customer_name}}</option>
                        @endforeach    
                       </select> 
                      </div>
                      <div class="col-md-2 mt-2 custom-form-spacing">
                        <!--<label>KEC Name :- </label>-->
                        <select class="custom-select js-example-basic-single" name="kec" id="kec">
                            <option value="">Select KEC Name </option>
                            @foreach($kec_name as $name)
                            <option value="{{$name->kec_name}}">{{$name->kec_name}}</option>
                        @endforeach                             
                        </select> 
                      </div>
                      <div class="col-md-2 mt-2 custom-form-spacing"> 
                        <!--<label>Product :- </label>-->
                        <select class="custom-select js-example-basic-single" name="product" id="product">
                            <option value="">Select Product </option>
                            @foreach($product as $name)
                            <option value="{{$name->name}}">{{$name->name}}</option>
                        @endforeach 
                        </select> 
                      </div>
                      <div class="col-md-2  mt-2 custom-form-spacing">
                        <!--<label>On Road Price :- </label>-->
                        <select class="custom-select js-example-basic-single" name="road_price" id="road_price">  
                            <option value="">Select On Road Price</option>
                            @foreach($price as $name)
                            <option value="{{$name->on_road_price}}">{{$name->on_road_price}}</option>
                        @endforeach 
                        </select> 
                      </div>
                      <div class="col-md-2 mt-2 custom-form-spacing">
                        <!--<label>Variant :- </label>-->
                        <select class="custom-select js-example-basic-single" name="variant" id="variant">                   
                            <option value="">Select Variant </option>         
                            @foreach($varient as $name)
                            <option value="{{$name->name}}">{{$name->name}}</option>
                        @endforeach 
                        </select> 
                      </div>
                      <div class="col-md-2  mt-2 custom-form-spacing">
                        <!--<label>Location :- </label>-->
                        <select class="custom-select js-example-basic-single" name="location" id="location">
                            <option value="">Select Location </option>
                            @foreach($branch as $name)
                            <option value="{{$name->name}}">{{$name->name}}</option>
                        @endforeach 
                        </select> 
                      </div>
                      <div class="col-md-2  mt-2 custom-form-spacing">
                        <!--<label>Start Date :- </label>-->
                        <select class="custom-select js-example-basic-single" name="start_date" id="start_date">
                            <option value="">Select Booking Date </option>
                            @foreach($date as $name)
                            <option value="{{$name->booking_date}}">{{$name->booking_date}}</option>
                        @endforeach 
                        </select> 
                      </div>
                      <div class="col-md-2  mt-2 custom-form-spacing">
                        <!--<label>End Date :- </label>-->
                        <select class="custom-select js-example-basic-single" name="end_date" id="end_date">
                            <option value="">Select Booking Date </option>
                            @foreach($date as $name)
                            <option value="{{$name->booking_date}}">{{$name->booking_date}}</option>
                        @endforeach 
                        </select> 
                      </div>
              </div>
              
                <!--   <div class="col-md-12 text-right mt-3">
                      <input type="button" name="submit" value="Search" class="btn btn-primary" id="submit">
                      &nbsp;
                      <a href="{{route('obf')}}" class="btn btn-secondary">Reset</a>
                  </div> -->
              
              </form>   
                 <div class="card-body table-responsive" id="datatable" style="text-align: center;">
                    <table class="table table-bordered data-table tables" id="data-table" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Date</th>
                                 <th>Location</th>
                                <th>Customer Name</th>
                                 <th>GST No </th>
                                  <th>Team Leader </th>
                                <th>KEC Name </th>
                                <!--<th>Customer Address (Bill to)</th>
                                <th>Customer Address (Ship to)</th>-->
                               <th>Model</th>
                                <th>Variant</th>
                                <th> Exterior Color</th>
                                 <th>VIN Number</th>
                                <th width="100">On Road Price(A)</th>
                                <th>Booking Amount (B(+))</th>
                                <th>DP Amount Received (C(+))</th>
                                <th>Finance Amount (D(+))</th>
                                 <th>Net Disbusment Amount</th>
                                <th>Exchange Amount (E(+))</th>
                                <th>Total received amount (B+C+D+E = F)</th>
                                <th>Discount (G(-))</th>
                                <th width="100">Net Amount Received (F-G=H)</th>
                                <th width="100">Due Amount  (A-H=I)</th>
                                <th>OBF Status</th>
                                @if($roleName == "Extended Warranty Incharge")
                                    <th>EW Status</th>
                                @endif
                                @if($roleName == "MCP")
                                    <th>MCP Status</th>
                                @endif
                                @if($roleName == "RSA")
                                    <th>RSA Status</th>
                                @endif
                                @if($roleName == "Accessory")
                                    <th>Accessory Status</th>
                                @endif
                                @if($roleName == "RTO")
                                    <th>RTO Status</th>
                                @endif
                                <th>Action</th>
                            </tr>
                        </thead>
                          <tfoot>
        <tr>
         <th></th></th>
                                <th></th>
                                 <th>Location</th>
                                <th></th>
                                 <th> </th>
                                  <th></th>
                                <th></th>
                                <!--<th>Customer Address (Bill to)</th>
                                <th>Customer Address (Ship to)</th>-->
                               <th></th>
                                <th></th>
                                <th> </th>
                                 <th></th>
                                <th width="100"></th>
                                <th></th>
                                <th></th>
                                <th> </th>
                                 <th></th>
                                <th></th>
                                <th></th>
                                <th width="100"></th>
                                <th width="100"></th>
                                <th></th>
                                <th></th>
        </tr>
    </tfoot>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Import</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                    </div>
                    <form action="{{ route('obf.import') }}" name="form" id="form" method="post" enctype="multipart/form-data"> 
                        @csrf
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-sm-12">
                                    <label for="first_name">Upload File Here</label>
                                    <input type="file" name="file" id="file" class="form-control" placeholder="Plese upload file here" required>
                                    <span class="kt-form__help error file"></span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-default">Submit!</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    <!-- </form> -->
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- Modal -->
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <canvas id="modelChart" width="400" height="400"></canvas>
    </div>
    <div class="col-md-4">
        <canvas id="variantChart" width="400" height="400"></canvas>
    </div>
    <div class="col-md-4">
        <canvas id="statusChart" width="400" height="400"></canvas>
    </div>
</div>
@endsection
@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script type="text/javascript">
    var datatable;

    $(document).ready(function() {
        $('.js-example-basic-single').select2();

        var tableColumns = [
            { data: 'id', name: 'id' },
            { data: 'booking_date', name: 'booking_date' },
            { data: 'branch_name', name: 'branch_name' },
            { data: 'customer_name', name: 'customer_name' },
            { data: 'gst', name: 'gst' },
            { data: 'team_name', name: 'team_name' },
            { data: 'sales_person_name', name: 'sales_person_name' },
            { data: 'product', name: 'product' },
            { data: 'car_varient_name', name: 'car_varient_name' },
            { data: 'exterior_color', name: 'exterior_color' },
            { data: 'vin_number', name: 'vin_number' },
            { data: 'on_road_price', name: 'on_road_price' },
            { data: 'booking_amount', name: 'booking_amount' },
            { data: 'dp_amount', name: 'dp_amount' },
            { data: 'loan_amount', name: 'loan_amount' },
            { data: 'net_disbusment', name: 'net_disbusment' },
            { data: 'total_exchange_amount', name: 'total_exchange_amount' },
            { data: 'final_total', name: 'final_total' },
            { data: 'finance_discount', name: 'finance_discount' },
            { data: 'net_total', name: 'net_total' },
            { data: 'due_amount', name: 'due_amount' },
            { data: 'status', name: 'status' },
        ];

        const rolename = @json($roleName);
        if (rolename == "Extended Warranty Incharge") {
            tableColumns.push({ data: 'ew_status', name: 'ew_status' });
        } else if (rolename == "MCP") {
            tableColumns.push({ data: 'mcp_status', name: 'mcp_status' });
        } else if (rolename == "RSA") {
            tableColumns.push({ data: 'rsa_status', name: 'rsa_status' });
        } else if (rolename == "Accessory") {
            tableColumns.push({ data: 'accesories_status', name: 'accesories_status' });
        } else if (rolename == "RTO") {
            tableColumns.push({ data: 'rto_status', name: 'rto_status' });
        }
        tableColumns.push({
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: true,
        });

        if ($('#data-table').length > 0) {
            datatable = $('#data-table').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 25,
                responsive: true,
                ajax: {
                    url: "{{ route('obf') }}",
                    type: "POST",
                    dataType: "json",
                    data: function(data) {
                        data.client = $('#client').val();
                        data.kec = $('#kec').val();
                        data.product = $('#product').val();
                        data.road_price = $('#road_price').val();
                        data.variant = $('#variant').val();
                        data.location = $('#location').val();
                        data.start_date = $('#start_date').val();
                        data.end_date = $('#end_date').val();
                    }
                },
                columns: tableColumns,
            });
        }

        // Reload DataTable on filter change
        $('#client,#kec,#product,#road_price,#variant,#location,#start_date,#end_date').change(function() {
            datatable.search(this.value).draw();
        });

        // Fetch data for chart and render
        $.ajax({
            url: "{{ route('getObfCounts') }}",
            method: "GET",
            success: function(data) {
                createPieChart(data);
            },
            error: function() {
                console.error("Failed to fetch chart data");
            }
        });
    });

    function createPieChart(data) {
        const ctx = document.getElementById('chartCanvas').getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: Object.keys(data),
                datasets: [{
                    label: 'Count',
                    data: Object.values(data),
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                }
            }
        });
    }
</script>
@endsection