@extends('layouts/layoutMaster')

@section('title', 'Site')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/swiper/swiper.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}" />
@endsection

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/cards-advance.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/swiper/swiper.js')}}">
</script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
@endsection

@section('content')
<div class="row">
	<div class="card p-3">
		<h4 class="mb-4">
		  <span class="fheading">Site
		  <a href="javascript::void(0)" data-bs-toggle="offcanvas" id="create" data-bs-target="#offcanvasAddUser" class="btn  ml-5" title="Add" style="float:right; background-color: {{Config::get('app.BUTTON_COLOR')}};color: white"><i class="fa-solid fa-plus"></i></a>

      <a href="javascript::void(0)"  class="btn" title="Export" id="Export" style="float:right; background:{{Config::get('app.BUTTON_COLOR')}};margin-right: 15px;"><i class="fa-solid fa-file-export"></i></a>

		</h4>
    <div class="table-responsive">
  		<table class="table table-bordered yajra-datatable">
  		    <thead>
  		        <tr>
  		            <th>No</th>
                  <th>Company Name</th>
  		            <th>Site Name</th>
  		            <th>Address</th>
                  <th>Lat</th>
                  <th>Long</th>
  		            <th>Action</th>
  		        </tr>
  		    </thead>
  		    <tbody>
  		    </tbody>
  		</table>
    </div>
	</div>
</div>


<div class="offcanvas offcanvas-end"  tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasAddUserLabel" class="offcanvas-title"><span id="heading"></span> Site</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100">
    <form class="add-new-user pt-0" id="form-data" onsubmit="return false">
      @csrf

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Select Company <span class="text-danger">*</span></b></label>
        <input type="hidden" name="id" id="id" class="form-control" >
        <select class="form-control" id="company_id" name="company_id">
          <option value="">Select Company</option>
          @foreach($companies as $company)
            <option value="{{$company->id}}">{{$company->name}}</option>
          @endforeach
        </select>
        <small id="companyErr" class="text-danger"></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Site Name <span class="text-danger">*</span></b></label>
        <input type="text" name="name" id="name" class="form-control" placeholder="Enter Site Name">
        <small id="nameErr" class="text-danger"></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Address <span class="text-danger">*</span></b></label>
        <textarea name="address" class="form-control" id="address" placeholder="Enter Site Address"></textarea>
        <small id="addressErr" class="text-danger"  ></small>
      </div>

       <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Lat <span class="text-danger">*</span></b></label>
        <input type="text" name="lat" class="form-control" id="lat" placeholder="Enter Site lat">
        <small id="latErr" class="text-danger"  ></small>
      </div>

       <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Long <span class="text-danger">*</span></b></label>
        <input type="text" name="long" class="form-control" id="long" placeholder="Enter Site Long">
        <small id="longErr" class="text-danger"  ></small>
      </div>


      <div class="mb-3" style="float: right;">
        <button type="reset" id="cancelBtn" class="btn btn-danger " data-bs-dismiss="offcanvas">Cancel</button>
        <button type="submit" class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit-btn submit-form" id="createBtn" style="background-color: {{Config::get('app.BUTTON_COLOR')}}; color: white;">Create</button>
      </div>
    </form>
  </div>
</div>
@include('content.Admin.Layoutes.Footer')
@endsection


@section('page-script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="{{asset('assets/js/dashboards-analytics.js')}}"></script>

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">
  //Table Create
  $(function () {
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('site') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'company_name', name: 'company_name'},
            {data: 'name', name: 'name'},
            {data: 'address', name: 'address'},
            {data: 'lat', name: 'lat'},
            {data: 'long', name: 'long'},
            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
                searchable: true
            },
        ]
    });
  });

  //Create
  $('#create').click(function(){
    $("#createBtn").prop('disabled', false);
    $('#createBtn').html('Create');
  	$('#heading').html('Create')
  	$('#createBtn').html('Create')
    $('#id').val('')

    EmptyError()
    $('#form-data').trigger("reset");
  })

  // Empty Error
  function EmptyError(){
    $('#nameErr').text('')
    $('#addressErr').text('')
    $('#companyErr').text('')
    $('#latErr').text('')
    $('#longErr').text('')
  }

  //Edit
  $('body').delegate('.edit', 'click', function() {
      $("#createBtn").prop('disabled', false);
      $('#createBtn').html('Create');
  	  EmptyError()
      $('#heading').html('Edit')
      $('#createBtn').html('Update')

      var id = $(this).attr("data-id")
      $.ajax({
		url: "{{ route('site.edit') }}", 
        method: "POST",  
        data:{id:id},
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },  
        dataType: 'json',
        success: function(response) {
          $('#id').val(response.id)
          $('#company_id').val(response.company_id)
          $('#name').val(response.name)
          $('#address').val(response.address)
          $('#lat').val(response.lat)
          $('#long').val(response.long)
        }
      })
    })

  //Form Submit
  $(".submit-form").click(function(e) {
        e.preventDefault();
        var data = $('#form-data').serialize();

        EmptyError()

        $.ajax({
          type: 'post',
          url: "{{ route('site.save') }}",
          data: data,
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function() {
            $("#createBtn").prop('disabled', true);
            $('#createBtn').html('....Please wait');
          },
          success: function(response) {
            if ($.isEmptyObject(response.error)) {
              $('.yajra-datatable').DataTable().ajax.reload();

              $(".modalForm").modal('hide');
              $("#cancelBtn").click()
              printSuccessMsg(response.msg);
            } else {
              printErrorMsg(response.error);
            }
          },
          error: function(response) { 
                $('#companyErr').text(response.responseJSON.errors.company_id);
                $('#nameErr').text(response.responseJSON.errors.name);
                $('#addressErr').text(response.responseJSON.errors.address);
                $('#latErr').text(response.responseJSON.errors.lat);
                $('#longErr').text(response.responseJSON.errors.long);
                $("#createBtn").prop('disabled', false);
                if($('#id').val()){
                  $('#createBtn').html('Update');
                }else{
                  $('#createBtn').html('Create');
                }
          }    
        });
    });

  //Delete Popup
  $('body').delegate('.deleteData', 'click', function() {
  	  $('#deleteRecord').html('Site')
  	  $('#modalCenter').modal('show');
  	  var id = $(this).attr("data-id")
  	  $('#delete_id').val(id)
  })

  // Delete
  $('#delete').click(function(){
     $("#delete").prop('disabled', true);
     $('#delete').html('Deleteing');
     var id = $('#delete_id').val();
	  $.ajax({
		url: "{{ route('site.delete') }}", 
        method: "POST",  
        data:{id:id},
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },  
        dataType: 'json',
        success: function(response) {
      	  $('.yajra-datatable').DataTable().ajax.reload();
          $("#modalCenter").modal('hide');
          $("#delete").prop('disabled', false);
          $('#delete').html('Delete');
          printSuccessMsg('Site Deleted Successfully..');
        },
        error: function(response) { 
          $('.yajra-datatable').DataTable().ajax.reload();
          $("#modalCenter").modal('hide');
          $("#delete").prop('disabled', false);
          $('#delete').html('Delete');
               printErrorMsg(response.responseJSON.message);
          }
      })
  })

  //Export Data
  $('#Export').click(function(){
      var search = $('.dataTables_filter input').val();
      window.location.href = window.origin+'/admin/site-export?search='+search;
  })
</script>

@endsection