@extends('layouts.admin_default')
@section('title', 'Service Center Table')
@section('page', 'Service Center / List')
@section('content')
<div class="layout-px-spacing">
   <div class="row layout-top-spacing">
      <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
         <div class="widget-content widget-content-area br-6">
            <div id="delete_bd_ms"></div>
            @if(isset($errors) && $errors->any())
            @foreach($errors->all() as $error )
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{$error}}
            </div>
            @endforeach
            @endif
            @if(session()->has('message'))
            <div class="alert alert-success fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('message') }}
            </div>
            @elseif(session()->has('error'))
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('error') }}
            </div>
            @endif
            <div class="col-md-12 text-right">
               <a class="btn btn-success mb-2" href="javascript:void();" onclick="csvAddModal();">Import Service Center</a>
               <a class="btn btn-success mb-2" href="{{ route('export-dealer') }}">Export  Service Center</a>
               <a href="javascript:void();" onclick="addModal();" class="btn btn-primary mb-2">Add +</a>
            </div>
            <div class="col-md-12 text-left">
               <div class="" id="#error"></div>
               <div class="multiple-action">
                  <button type="button" onclick="multiple_del()" class="btn btn-danger del">Delete</button>
                  {{-- <button type="button" onclick="multiple_active()" class="btn btn-success active-status">Active</button>
                  <button type="button"  onclick="multiple_deactive()" class="btn btn-danger inactive-status">Inactive</button> --}}
               </div>
               <small>Apply action on checked record.</small>
            </div>
            <div class="mb-4 mt-4">
               <table id="multi-column-ordering" class="table table-hover">
                  <thead>
                     <tr>
                        <th><input type="checkbox" class="new-control-input" id="contact-check-all"></th>
                        <th>Primary Contact Name</th>
                        <th>Service Center Name</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Physical Address</th>
                        <th>Service Center Type</th>
                        <!-- <th>Primary Contact Name</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip code</th> -->
                        <th>Phone Number</th>
                        <th>Created Date</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody id="tableItem">
                  </tbody>
                  <!-- <tfoot>
                     <tr>
                        <th></th>
                        <th>Primary Contact Name</th>
                        <th>Service Center Name</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Physical Address</th>
                        <th>Service Center Type</th>
                        <!-- <th>Primary Contact Name</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip code</th> -->
                        <!-- <th>Phone Number</th>
                        <th>Created Date</th>
                        <th>Action</th> -->
                     <!-- </tr> -->
                  <!-- </tfoot> --> -->
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
<!--end of listing -->
<!-- add modal start -->
<div class="modal fade" id="add_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="serviceCenterForm" method="post" action="{{route('savedServiceCenter')}}" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">Add Service Center</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                     <div class="form-group">
                         <label for="name">Name*</label>
                         <input type="text" class="form-control" name="name" required id="name">
                     </div>
                     </div> -->
                  <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Basic Info</h6>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Name -->
                     <div class="form-group">
                        <label for="name">Service Center Name*</label>
                        <input type="text" class="form-control" name="tech_name" required id="tec_name">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Mobile -->
                     <div class="form-group">
                        <label for="mobile">Mobile*</label>
                        <input type="number" class="form-control" required name="mobile" placeholder="Mobile">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="email">Email id*</label>
                        <input type="email" class="form-control" name="email" required id="email">
                     </div>
                  </div>
                  <div class="col-md-6 mb-4">
                     <label for="fullName">Service Center Type*</label>
                     <select class="form-control" name="center_type" required>
                        <option value="">--Select Center Type--</option>
                        <option value="authorized">Authorized</option>
                        <option value="independent">Independent</option>
                     </select>
                  </div>
               </div>
               <div class="row">
                  <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Business Info</h6>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Business Name -->
                     <div class="form-group">
                        <label for="business_name">Business Name*</label>
                        <input type="text" class="form-control" required name="business_name" id="business_name">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Tax Identification Number -->
                     <div class="form-group">
                        <label for="tax_identification_number">Tax Identification Number*</label>
                        <input type="text" class="form-control" required name="tax_identification_number" id="tax_identification_number">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Services Provided -->
                     <div class="form-group">
                        <label for="services_provided">Services Provided*</label>
                        <select class="form-control" name="service_provided" required>
                           <option value="">--Select Service Provided--</option>
                           <option value="charger_repairs">Charger Repairs</option>
                           <option value="maintenance">Maintenance</option>
                        </select>
                     </div>
                  </div>
                  <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="equipment_and_tools">Equipment and Tools</label>
                        <textarea class="form-control" name="equipment_and_tools" id="equipment_and_tools"></textarea>
                     </div>
                  </div> -->
                  <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="average_response_time">Average Response Time</label>
                        <input type="number" class="form-control" name="average_response_time" id="average_response_time">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="customer_satisfaction_score">Customer Satisfaction Score</label>
                        <input type="number" class="form-control" name="customer_satisfaction_score" id="customer_satisfaction_score">
                     </div>
                  </div> -->
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Payment Terms -->
                     <div class="form-group">
                        <label for="payment_terms">Payment Terms*</label>
                        <textarea class="form-control" required name="payment_terms" id="payment_terms"></textarea>
                     </div>
                  </div>

              </div>
               <div class="row">
                  <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Permanent Address</h6>
                  </div>
                  <div class="col-md-12">
                     <!-- Permanent Address (Textarea) -->
                     <div class="form-group">
                        <label for="permanent_address">Physical Address*</label>
                        <textarea class="form-control" required name="physical_address" id="physical_address" rows="3"></textarea>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- City) -->
                     <div class="form-group">
                        <label for="geographical_location_city">City*</label>
                        <input type="text" class="form-control" required name="geographical_location_city" id="geographical_location_city">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- State -->
                     <div class="form-group">
                        <label for="geographical_location_state">State*</label>
                        <input type="text" class="form-control" required name="geographical_location_state" id="geographical_location_state">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Zip -->
                     <div class="form-group">
                        <label for="geographical_location_zip">Zip*</label>
                        <input type="text" class="form-control" required name="geographical_location_zip" id="geographical_location_zip">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Service Area -->
                     <div class="form-group">
                        <label for="service_area">Service Area*</label>
                        <input type="text" class="form-control" required name="service_area" id="service_area">
                     </div>
                  </div>
               </div>
               <div class="row">
                  <!-- Add more profile creation fields here -->
               </div>
               <div class="row">
                <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Primary Contact</h6>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Primary Contact Name -->
                     <div class="form-group">
                        <label for="primary_contact_name">Name*</label>
                        <input type="text" class="form-control" required name="primary_contact_name" id="primary_contact_name">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Phone -->
                     <div class="form-group">
                        <label for="primary_contact_phone">Phone*</label>
                        <input type="number" class="form-control" required name="primary_contact_phone" id="primary_contact_phone">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Email -->
                     <div class="form-group">
                        <label for="primary_contact_email">Email*</label>
                        <input type="email" class="form-control" required name="primary_contact_email" id="primary_contact_email">
                     </div>
                  </div>
                  
                  
                  <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="outstanding_balance">Outstanding Balance</label>
                        <input type="number" class="form-control" name="outstanding_balance" id="outstanding_balance">
                     </div>
                  </div> -->
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Outstanding Balance -->
                     <div class="form-group">
                        <label for="password">Password*</label>
                        <input type="text" class="form-control" required name="password" id="password">
                     </div>
                  </div>
                  @php $roles = \App\Models\Role::distinct()->get(['role_id', 'title']); @endphp
                  <div class="col-md-6 mb-4">
                     <label for="fullName">Role*</label>
                     <select required name="role" id="role" class="form-control" style="pointer-events: none;opacity: 0.6;background: #ccc;">
                                          </select>
                  </div>
                  <div class="col-md-6 mb-4">
                     <label for="fullName">Status*</label>
                     <select name="status" id="status" required class="form-control select">
                     <option value="1" @if(isset($user) && $user->status == 1){{'selected'}}@endif>Active</option>
                     <option value="0" @if(isset($user) && $user->status == 0){{'selected'}}@endif>De-Active</option>
                     </select>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- add modal end -->
<!-- edit modal start -->
<div class="modal fade" id="edit_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="serviceCenterEditForm" method="post" action="{{route('savedServiceCenter')}}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" id="id">
            <div class="modal-header">
               <h5 class="modal-title">Edit Service Center</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                     <div class="form-group">
                         <label for="name">Name*</label>
                         <input type="text" class="form-control" name="name" required id="unm">
                     </div>
                     </div> -->
                     <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Basic Info</h6>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Name -->
                     <div class="form-group">
                        <label for="name">Service Center Name*</label>
                        <input type="text" class="form-control" name="tech_name" required id="center_nm">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Mobile -->
                     <div class="form-group">
                        <label for="mobile">Mobile*</label>
                        <input type="number" class="form-control" required name="mobile" placeholder="Mobile" id="mob">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="email">Email id*</label>
                        <input type="email" class="form-control" name="email" required id="em">
                     </div>
                  </div>
                  <div class="col-md-6 mb-4">
                     <label for="fullName">Service Center Type*</label>
                     <select  required class="form-control" name="center_type" id="c_type">
                        <option value="">--Select Center Type--</option>
                        <option value="authorized">Authorized</option>
                        <option value="independent">Independent</option>
                     </select>
                  </div>
               </div>
               <div class="row">
                    <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Business Info</h6>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Business Name -->
                     <div class="form-group">
                        <label for="business_name">Business Name*</label>
                        <input type="text" class="form-control" required name="business_name" id="b_name">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Tax Identification Number -->
                     <div class="form-group">
                        <label for="tax_identification_number">Tax Identification Number*</label>
                        <input type="text" class="form-control" required name="tax_identification_number" id="t_number">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Services Provided -->
                     <div class="form-group">
                        <label for="services_provided">Services Provided*</label>
                        <select class="form-control" name="service_provided" id="s_provided" required>
                           <option value="">--Select Service Provided--</option>
                           <option value="charger_repairs">charger repairs</option>
                           <option value="maintenance">maintenance</option>
                        </select>
                     </div>
                  </div>
                  <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="equipment_and_tools">Equipment and Tools</label>
                        <textarea class="form-control" name="equipment_and_tools" id="e_tools"></textarea>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="average_response_time">Average Response Time</label>
                        <input type="number" class="form-control" name="average_response_time" id="a_time">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="customer_satisfaction_score">Customer Satisfaction Score</label>
                        <input type="number" class="form-control" name="customer_satisfaction_score" id="c_score">
                     </div>
                  </div> -->
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Payment Terms -->
                     <div class="form-group">
                        <label for="payment_terms">Payment Terms*</label>
                        <textarea class="form-control" name="payment_terms" id="p_terms" required></textarea>
                     </div>
                  </div>
                  <!-- <div class="col-sm-6 col-md-6 col-lg-6">
                     
                     <div class="form-group">
                        <label for="outstanding_balance">Outstanding Balance</label>
                        <input type="number" class="form-control" name="outstanding_balance" id="o_balance">
                     </div>
                  </div> -->

              </div>
               <div class="row">
                    <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Permanent Address</h6>
                  </div>
                  <div class="col-md-12">

                     <!-- Permanent Address (Textarea) -->
                     <div class="form-group">
                        <label for="permanent_address">Physical Address*</label>
                        <textarea class="form-control" name="physical_address" required id="addr" rows="3"></textarea>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Geographical Location (City) -->
                     <div class="form-group">
                        <label for="geographical_location_city">City*</label>
                        <input type="text" class="form-control" required name="geographical_location_city" id="g_city">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- State -->
                     <div class="form-group">
                        <label for="geographical_location_state">State*</label>
                        <input type="text" class="form-control" required name="geographical_location_state" id="g_state">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Zip -->
                     <div class="form-group">
                        <label for="geographical_location_zip">Zip*</label>
                        <input type="text" class="form-control" required name="geographical_location_zip" id="g_zip">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Service Area -->
                     <div class="form-group">
                        <label for="service_area">Service Area*</label>
                        <input type="text" class="form-control" required name="service_area" id="s_area">
                     </div>
                  </div>
               </div>
               <div class="row">
                  <!-- Add more profile creation fields here -->
               </div>
               <div class="row">
                    <div class="modal-header" style="margin-bottom: 20px;">
                    <h6 class="modal-title">Primary Contact</h6>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Primary Contact Name -->
                     <div class="form-group">
                        <label for="primary_contact_name">Name*</label>
                        <input type="text" class="form-control" required name="primary_contact_name" id="pnm">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Phone -->
                     <div class="form-group">
                        <label for="primary_contact_phone">Phone*</label>
                        <input type="number" class="form-control" required name="primary_contact_phone" id="p_phone">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Email -->
                     <div class="form-group">
                        <label for="primary_contact_email">Email*</label>
                        <input type="text" class="form-control" required name="primary_contact_email" id="p_email">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <!-- Outstanding Balance -->
                     <div class="form-group">
                        <label for="password">Password</label>
                        <input type="text" class="form-control"  name="password" id="password">
                     </div>
                  </div>
                  
                  @php $roles = \App\Models\Role::distinct()->get(['role_id', 'title']); @endphp
                  <div class="col-md-6 mb-4">
                     <label for="fullName">Role*</label>
                     <select name="role" id="ro" class="form-control"  required style="pointer-events: none;opacity: 0.6;background: #ccc;">
                                          </select>
                  </div>
                  <div class="col-md-6 mb-4">
                     <label for="fullName">Status*</label>
                     <select name="status" id="st" class="form-control select" required>
                     <option value="1" @if(isset($user) && $user->status == 1){{'selected'}}@endif>Active</option>
                     <option value="0" @if(isset($user) && $user->status == 0){{'selected'}}@endif>De-Active</option>
                     </select>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
</div>
<!-- edit modal end -->
<!-- view modal start -->
<div class="modal fade" id="view_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form method="post">
            <div class="modal-header">
               <h5 class="modal-title">Dealers Details</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body" id="detailContent">
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
                  <button type="button" class="btn btn-danger" onclick="ajax_delete_item();" >Yes, Delete</button> -->
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- view modal end -->
<!-- import csv file to add Category start -->
<div class="modal fade" id="csv_add_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="addCsvForm" method="post" action="{{route('importDealer')}}" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">Import Csv - Dealers</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group mb-4">
                        <div class="custom-file text-left">
                           <input type="file" required name="csv_file" class="custom-file-input" id="csv_file">
                           <label class="custom-file-label" for="csv_file">Choose file</label>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <a class="btn btn-success csvSample" href="{{route('sample-file-download-dealer')}}">Download Sample</a>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between">
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- import csv file to add Category end -->


<!-- add spare parts start -->
<div class="modal fade" id="add_spare_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="addSpareForm" method="post" action="{{route('saveServiceSpare')}}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" id="service_center_user_id" name="service_center_user_id">
            <div class="modal-header">
               <h5 class="modal-title">Add Spare Parts</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-md-6 mb-4">
                     <label for="fullName">Spare Parts</label>
                     <select class="form-control" name="spare_part" id="spare_part" required>
                        <option value="">--Select Spare Parts--</option>
                        @foreach($sparePart as $spare)
                        <option value="{{$spare->id}}">{{$spare->title}}</option>
                        @endforeach
                     </select>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <div class="form-group">
                        <label for="quantity">Quantity</label>
                        <input type="text" class="form-control" name="quantity" id="quantity" required>
                     </div>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

<!-- add spare parts end -->


@endsection
@section('footer')
<script type="text/javascript">
   // function destroy(url){
   //   swal({
   //     title: "Are you sure?",
   //     text: "Do you want to delete this Category!",
   //     type: "warning",
   //     showCancelButton: true,
   //     confirmButtonText: "Yes, delete it!",
   //     cancelButtonText: "No, cancel plx!",
   //     closeOnConfirm: false,
   //   }, function(isConfirm) {
   //     if (isConfirm) {
   //       document.location.href = url;
   //     }
   //   });
   // }
   
</script>
<script type="text/javascript">
   $(document).ready(function(){
   $('#multi-column-ordering').DataTable({
      processing: true,
      serverSide: true,
      stateSave: true,
      ajax: "{{route('getserviceCenterDetails')}}",
      columns: [
         { data: 'checkall', orderable: false, searchable: false },
         {data:'name'},
         {data:'technician_name'},
         {data:'email'},
         {data:'mobile'},
         {data:'physical_address'},
         {data:'service_center_type'},
         // {data:'primary_contact_name'},
         // {data:'geographical_location_city'},
         // {data:'geographical_location_state'},
         // {data:'geographical_location_zip'},
         {data:'phone_number'},
         { data:'created_at'},
         { data: 'action', orderable: false, searchable: false },
      ],
      order: [[1, 'asc']],
      drawCallback: function (settings) {
   
         var response = settings.json;
         // $('#totalRecords').text(response.totalRecords);
         // $('#activeRecords').text(response.activeRecords);
         // $('#inactiveRecords').text(response.inactiveRecords);
         // $('#deletedRecords').text(response.deletedRecords);
         console.log(response);
         updateIcon()
   
     },
   });
   
   
     /*ajax header setup*/
     $.ajaxSetup({
         headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         }
     });
   });
   
   
   
   
   function addModal(){
      $("#add_blog_modal").modal('show');
   }
   
   function view_item(id){
     let _url = "{{route('getServiceCenterViewDetails')}}";
     let _token = $('meta[name="csrf-token"]').attr('content');
     $.ajax({
         url: _url,
         type: 'POST',
         data: {
          id: id,
           _token: _token
         },
         success: function(response) {
             console.log(response);
             let result = JSON.parse(response);
             if(result.status){
                 var itemDetails = result.data;
                 var d = new Date(itemDetails.created_at);
                 var created_at = d.toDateString() + ', '+d.getUTCHours() +':'+ d.getUTCMinutes()+':'+ d.getUTCSeconds();
                 $('#detailContent').html('');
               //   $('#detailContent').append('<div class="table-responsive"><table class="table table-bordered"><tr><th>Service Center Name</th><td>'+itemDetails.service_center_name+'</td><th>Phone Number</th><td>'+itemDetails.phone_number+'</td></tr><tr><th>Email</th> <td>'+itemDetails.email+'</td><th>physical_address</th> <td>'+itemDetails.physical_address+'</td><th>service center type</th> <td>'+itemDetails.service_center_type+'</td><th>primary contact name</th><td>'+itemDetails.primary_contact_name+'</td><th>primary contact phone</th> <td>'+itemDetails.primary_contact_phone+'</td><th>geographical location state</th> <td>'+itemDetails.geographical_location_state+'</td><th>geographical location city</th><td>'+itemDetails.geographical_location_city+'</td><th>geographical location zip</th><td>'+itemDetails.geographical_location_zip+'</td><th>service area</th> <td>'+itemDetails.service_area+'</td><th>business name</th> <td>'+itemDetails.business_name+'</td><th>tax_identification_number</th><td>'+itemDetails.tax_identification_number+'</td><th>services provided</th> <td>'+itemDetails.services_provided+'</td><th>Created Date</th><td>'+created_at+'</td></tr></table></div>');
               $('#detailContent').append('<div class="table-responsive"><table class="table table-bordered"><tr><th>Service Center Name</th><th>Phone Number</th><th>Email</th><th>Physical Address</th><th>Service Center Type</th><th>Primary Contact Name</th><th>Primary Contact Phone</th><th>Geographical Location State</th><th>Geographical Location City</th><th>Geographical Location Zip</th><th>Service Area</th><th>Business Name</th><th>Tax Identification Number</th><th>Services Provided</th><th>Created Date</th></tr><tr><td>'+itemDetails.service_center_name+'</td><td>'+itemDetails.phone_number+'</td><td>'+itemDetails.email+'</td><td>'+itemDetails.physical_address+'</td><td>'+itemDetails.service_center_type+'</td><td>'+itemDetails.primary_contact_name+'</td><td>'+itemDetails.primary_contact_phone+'</td><td>'+itemDetails.geographical_location_state+'</td><td>'+itemDetails.geographical_location_city+'</td><td>'+itemDetails.geographical_location_zip+'</td><td>'+itemDetails.service_area+'</td><td>'+itemDetails.business_name+'</td><td>'+itemDetails.tax_identification_number+'</td><td>'+itemDetails.services_provided+'</td><td>'+created_at+'</td></tr></table></div>');
               $("#view_blog_modal").modal('show');
          }else{
                 myFaildToast('Something went wrong.');
             }
         }
     });
   }
   
   function edit_item(id){
     let _url = "{{route('getServiceCenterEditDetails')}}";
     let _token = $('meta[name="csrf-token"]').attr('content');
     $.ajax({
         url: _url,
         type: 'POST',
         data: {
          id: id,
           _token: _token
         },
         success: function(response) {
             console.log(response);
             let result = JSON.parse(response);
             if(result.status){
                $('#imageContainer').empty();
                 // var itemDetails = result.data;
                //  console.log(result.data.country);
             
              
                $('#id').val(result.data.id);
                 $('#unm').val(result.data.name);
                 $('#center_nm').val(result.data.service_center_name);
                 $('#mob').val(result.data.email);
                 $('#em').val(result.data.phone_number);
                 $('#addr').val(result.data.physical_address);
                 $('#c_type').val(result.data.service_center_type);
                 $('#pnm').val(result.data.primary_contact_name);
                 $('#p_phone').val(result.data.primary_contact_phone);
                 $('#p_email').val(result.data.primary_contact_email);
                 $('#g_city').val(result.data.geographical_location_city);
                 $('#g_state').val(result.data.geographical_location_state);
                 $('#g_zip').val(result.data.geographical_location_zip);
                 $('#s_area').val(result.data.service_area);
                 $('#b_name').val(result.data.business_name);
                 $('#t_number').val(result.data.tax_identification_number);
                 $('#s_provided').val(result.data.services_provided);
                 $('#e_tools').val(result.data.equipment_and_tools);
                 $('#a_time').val(result.data.average_response_time);
                 $('#c_score').val(result.data.customer_satisfaction_score);
                 $('#p_terms').val(result.data.payment_terms);
                 $('#o_balance').val(result.data.outstanding_balance);
                 $('#ro').val(result.data.role);
                 $('#stat').val(result.data.status);
   
                   
                 $("#edit_blog_modal").modal('show');
             }else{
                 myFaildToast('Something went wrong.');
             }
         }
     });
   }


   function add_spare(id){
      $('#service_center_user_id').val(id);
      $("#add_spare_modal").modal('show');
   }
   
   
</script>
<!-- form validation start -->
<script>
   $( "#addSpareForm" ).validate({});

   $( "#serviceCenterForm" ).validate({});
   
   
   $( "#serviceCenterEditForm" ).validate({});
   
   
   $( "#addCsvForm" ).validate({ });
   
   
   
</script>
<!-- form validation end -->
<!-- getting item details start -->
<!-- getting item details end -->
<!-- add csv modal start -->
<!-- getting item details end -->
<!-- add csv modal start -->
<script type="text/javascript">
   function csvAddModal(){
        $("#csv_add_blog_modal").modal('show');
   }
</script>
<script>
   // Add the following code if you want the name of the file appear on select
   $(".custom-file-input").on("change", function() {
     var fileName = $(this).val().split("\\").pop();
     $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
   });
</script>
<!-- check all record start -->
<script type="text/javascript">
   $("#contact-check-all").click(function(){
       $('input:checkbox[name="multicheck[]"]').not(this).prop('checked', this.checked);
   });
   
   
   function multiple_del(){
      var multicheck = []
      $("input[name='multicheck[]']:checked").each(function ()
      {
          multicheck.push(parseInt($(this).val()));
      });
      if(multicheck.length > 0){
          Swal.fire({
           title: 'Are you sure?',
           text: "Do you want to delete selected Service Center!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Yes'
           }).then((result) => {
           if (result.isConfirmed) {
               $.ajax({
                    url: "{{route('servicecenter-multipleDel')}}",
                    method: 'post',
                    data: {ids: multicheck},
                })
                .done(function(obj) {
                    console.log(obj);
                    let result = JSON.parse(obj);
                    if(result.status){
                         mySuccessToast(result.message);
                         setTimeout(() => {
                           $('#contact-check-all').prop('checked', false);
                         }, 500);
                    }else{
                         myFaildToast('Something went wrong.');
                    }
                     $('#multi-column-ordering').DataTable().ajax.reload();
                });
           }else{
               // alert('false');
           }
       })
      }else{
         myFaildToast('Please select a record.');
      }
   
   
   } 
</script>
<!-- footer script if required -->
@endsection