@extends('layouts/layoutMaster')

@section('title', 'Setting')

@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">
    @if($data)
     
      <h4>Setting</h4>
        <form class="add-new-user pt-0" id="form-data" onsubmit="return false">
            @csrf
            <div class=" col-md-6 mb-3">
              <label class="form-label" for="add-user-fullname"><b>Radius <span class="text-danger">*</span></b></label>
              <input type="hidden" name="id" id="id" value="{{$data->id}}" class="form-control" >
              <input type="number" name="radius" id="radius" value="{{$data->radius}}" class="form-control" placeholder="Enter Radius">
              <small id="idErr" class="text-danger"></small>
              <small id="radiusErr" class="text-danger"></small>
            </div>
            <hr>
            
            <p>Twilio Settings</p>
            <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label" for="twilio_sid"><b>SID</b></label>
              <input type="text" name="twilio_sid" id="twilio_sid" value="{{$data->twilio_sid}}" class="form-control" placeholder="Enter Twilio SID">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="twilio_auth_token"><b>Auth Token</b></label>
              <input type="text" name="twilio_auth_token" id="twilio_auth_token" value="{{$data->twilio_auth_token}}" class="form-control" placeholder="Enter Twilio Auth Token">
            </div>
            </div>
            <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label" for="twilio_from_number"><b>Form Number</b></label>
              <input type="text" name="twilio_from_number" id="twilio_from_number" value="{{$data->from_number}}" class="form-control" placeholder="Enter Twilio From Number">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="twilio_to_number"><b>To Number</b></label>
              <input type="text" name="twilio_to_number" id="twilio_to_number" value="{{$data->to_number}}" class="form-control" placeholder="Enter Twilio To Number">
            </div>
            </div>
            
            <hr>
            
            <p>Google Firebase Settings</p>
            <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label" for="fcm_server_key"><b>Fcm Server Key</b></label>
              <input type="text" name="fcm_server_key" id="fcm_server_key" value="{{$data->fcm_server_key}}" class="form-control" placeholder="Enter Fcm Server Key">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="fcm_sender_id"><b>Fcm Sender Id</b></label>
              <input type="text" name="fcm_sender_id" id="fcm_sender_id" value="{{$data->fcm_sender_id}}" class="form-control" placeholder="Enter Fcm Sender Id">
            </div>
            </div>

            <div class="mb-3" style="float: left;">
              <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;">Update</button>
            </div>
          </form>  
     </div>
    @else
      <h3 class="text-center">Setting Not Avilable</h3>
    @endif
  </div>
</div>
@include('content.Admin.Layoutes.Footer')
@endsection


@section('page-script')
<script src="{{asset('assets/js/dashboards-analytics.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">
  //Form Submit
  $(".submit-form").click(function(e) {
        e.preventDefault();
        var data = $('#form-data').serialize();
        $.ajax({
          type: 'post',
          url: "{{ route('setting.update') }}",
          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)) {
              $("#createBtn").prop('disabled', false);
              $('#createBtn').html('Update');
              printSuccessMsg('Setting Update Successfully..');
            } else {
              printErrorMsg(response.error);
            }
          },
          error: function(response) { 
                $('#idErr').text(response.responseJSON.errors.id);
                $('#radiusErr').text(response.responseJSON.errors.radius);
                $("#createBtn").prop('disabled', false);
                $('#createBtn').html('Update');
          }    
        });
    }); 
</script>

@endsection