@extends('layout.master')
@section('content')

                <section class="content pb-5">
                    <div class="container-fluid">
                        <meta name="csrf-token" content="{!! csrf_token() !!}">
                     <div class="row py-sm-5">
                     <div class="col-md-12">
                        <div class="title-section">
                           <p>Upload LSP Delivery Cost Component</p>
                        </div>
                        <form id="lsp_upload_pincode" enctype="multipart/form-data">
                           <div class="card">
                              <div class="card-header">
                                 
                                 <div class="row">
                                    <div class="col-md-3">
                                       <div class="upload-btn-wrapper">
                                          <a href="{{URL::asset('/sample/lsp-delivery-cost-component.xlsx')}}" class="btn btn-danger text-white mr-3 mt-sm-0 mt-3">Download Sample <i class='fa fa-download fa-download--icon' aria-hidden='true'></i></a>
                                       </div>
                                    </div>
                                    <div class="mb-3">
                                       <input class="custom-input" type="file" id="formFile" name="upload_pincode">
                                    </div>
                                        <div class="col-md-2">
                                            <div class="upload-btn-wrapper">
                                                <button type="submit" class="btn btn-danger">Upload</button>
                                            </div>
                                        </div> 

                                        <div class="col-md-3">
                                            <span class="tooltip-container">
                                                <i class="fa fa-info-circle"></i>
                                                <ul class="tooltip-text">
                                                    <li>Column A: Type (Alias) can not be change or edited.</li>
                                                    <li>Column B: These particular you can mention as per your requirement recommended not to change</li>
                                                    <li>Column C: Currency should not be change</li>
                                                    <li>Column D: Unit should not be change</li>
                                                    <li>Column E: Enter your Zones in this column</li>
                                                    <li>Column F: Enter your Mode in this column</li>
                                                    <li>Column G: Enter your Rates in Value column</li>
                                                </ul>
                                            </span>
                                        </div> 
                                </div>
                            </div>
                          </div>
                        </form>
                        </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="title-section">
                                    <p>LSP : Delivery Cost Component</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="customername">Area</label>
                                    <select class="form-control">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="orderid">Select</label>
                                    <select class="form-control">
                                        <option value="">Pickup</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-striped" id="influencingmatrixListing">
                                        <thead>
                                            <tr>
                                                <th scope="col">Sr. No.</th>
                                                <th scope="col">LSP</th>
                                                <th scope="col">Type</th>
                                                <th scope="col">Particulars</th>
                                                <th scope="col">Zone</th>
                                                <th scope="col">Currency</th>
                                                <th scope="col">Unit</th>
                                                <th scope="col">Mode</th>
                                                <th scope="col">Price</th>
                                                <th scope="col">Addition Charge</th>
                                                <th scope="col">Service Type</th>
                                                <th scope="col">Created At</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </section>

            </div>

            <style>
               .tooltip-container {
  position: relative;
  display: inline-block;
      width: 120% !important;
}

.tooltip-text {
  visibility: hidden;
  width: 100%;
  background-color: #fff;
  color: #333;
  text-align: left; /* Adjusted for left-aligned text */
  border-radius: 6px;
  padding: 10px; /* Increased padding for better readability */
  position: absolute;
  z-index: 1;
  top: 100%; /* Position the tooltip below the icon */
  left: 0; /* Adjusted to start from the left edge of the container */
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  white-space: normal; /* Allow text to wrap */
  font-size: 14px; /* Adjust font size as needed */
  line-height: 1.4; /* Adjust line height for better spacing */
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

            </style>

        <script>
            $(document).ready(function() {
                $("#influencingmatrixListing").DataTable({
                    "language": {
                        "zeroRecords": "No record(s) found."
                    },
                    processing: true,
                    serverSide: true,
                    lengthChange: true,
                    order: [0, 'asc'],
                    searchable: true,
                    bStateSave: false,

                    ajax: {
                        url: "{{ url('/lsp/master/delivery-cost-component-data') }}",
                        data: function(d) {}
                    },

                    columns: [

                        {
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            sortable: false
                        },
                        {
                            data: 'lsp_id',
                            name: 'lsp_id',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'type',
                            name: 'type',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'particulars',
                            name: 'particulars',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'zone_id',
                            name: 'zone_id',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'currency',
                            name: 'currency',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'unit',
                            name: 'unit',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'mode',
                            name: 'mode',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'value',
                            name: 'value',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'addition_charge',
                            name: 'addition_charge',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'service_type',
                            name: 'service_type',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'created_at',
                            name: 'created_at',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        }
                    ]
                });

              
    $('#lsp_upload_pincode').on('submit',function(e){
      e.preventDefault();
      $.ajax({
          method: 'POST',
          url:"{{url('/lsp/master/upload-delivery-cost-component')}}",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data: new FormData(this),
          dataType:'JSON',
              contentType: false, // The content type used when sending data to the server.
              cache: false, // To unable request pages to be cached
              processData: false,
              beforeSend: function () { // Before we send the request, remove the .hidden class from the spinner and default to inline-block.
                $('#custum-loader').removeClass('hidden');
                  $('body').addClass('no-scroll');
              },
              success: function (data) {
                  if(data.status == 'true'){
                      
                      swal({
                          title: "Success",
                          text: data.message,
                          type: "success",
   
                          closeOnConfirm: false,
                          showLoaderOnConfirm: true,
                      },
                      function(){
                          window.location.reload();
                      });
                      
                  }
                  else{
   
                      swal({
   
                        title: "oops!",
                        text: data.message,
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
   
                    });
   
                  }
   
              },
              error: function () {
                    swal({
                        title: "oops!",
                        text: "Invalid Excel format",
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    }); 
                console.log(`Failed`)
              },
              complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner.
                  $('#loader').addClass('hidden');
                  $('body').removeClass('no-scroll');
                  $('#custum-loader').addClass('hidden');
              },
   
        });
        });
            });
        </script>
    @endsection