@extends('admin.layout')
@section('content')
<style>
	#watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;

    display: block;
    width: 300%;
    height: 300%;

    transform: rotate(-45deg);
    content: attr(data-watermark);

    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
	.content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
        html .magicsearch-wrapper .multi-item span {
            line-height: 1;
            font-size: 11px;
            align-self: center;
        }

        html .magicsearch-wrapper .multi-item {
            display: flex;
            font-size: inherit;
            position: relative;
            background: #ecf5fc;
            border: solid 1px #c2e0ff;
            padding-left: 4px;
            border-radius: 2px;
            margin-right: 4px !important;
            padding-right: 5px;
            margin-bottom: calc(1rem * 0.375) !important;
            height: auto !important;
            line-height: 1 !important;
        }

        html .magicsearch-wrapper .multi-item-close {
            padding-top: 0;
            padding-bottom: 0;
            line-height: 1;
            font-size: 11px;
            height: 100%;
            padding-top: 1px;
            padding-bottom: 1px;
            padding-left: 6px;
            padding-right: 6px;
            margin-left: 4px;
            border-left: solid 1px #c2e0ff;
            display: block;
            position: static;
        }

        html .magicsearch-wrapper .multi-item-close:before {
            content: "\00D7";
            transform: none;
            border: 0;
            background: transparent;
            height: auto;
            width: auto;
            font-size: 11px;
            position: static;
            line-height: 1;
            display: block;
            width: 10px;
        }

        html .magicsearch-wrapper .multi-item-close:after {
            display: none;
        }

        html .magicsearch-wrapper .multi-items {
            position: static;
            clear: both;
            margin-top: 4px;
            max-height: 60px;
            overflow-y: auto;
        }

        html .magicsearch-wrapper .multi-items:after {
            content: "";
            display: block;
            clear: both;
        }

        html .magicsearch-wrapper .multi-item-close:hover:before {
            background: transparent !important;
        }
        html .magicsearch-wrapper input.magicsearch.multi {
            display: block;
            width: 100% !important;
            height: 34px !important;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            border-radius: 0;
        }

        html .magicsearch-wrapper {
            width: 100% !important;
        }
        .help-block{margin-top: 0px; margin-bottom: 0px;}
    </style>
<div class="search-list">
	<div class="content-wrapper search-result-list">
  <section class="content-header">
    <h1> {{ trans('Add User') }} <small></small> </h1>
    <ol class="breadcrumb">
       <li><a href="{{ URL::to('admin/dashboard/this_month') }}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Add User') }}</li>
    </ol>
  </section>
	@php
		$getUserRoleData 	= userRoleData();
		$User				= explode(",",$getUserRoleData->User);
		//$User				= array("Add", "View", "Edit", "Delete");
	@endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          <div class="box-header">
            <!-- <h3 class="box-title">{{ trans('Add New User') }} </h3> -->
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                    <div class="">            
                         <div class="box-body">
							@if( count($errors) > 0)
								@foreach($errors->all() as $error)
									<div class="alert alert-success" role="alert">
										<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
										<span class="sr-only">{{ trans('labels.Error') }}:</span>
										{{ $error }}
									</div>
								@endforeach
							@endif   
							@if(in_array(auth()->guard('admin')->user()->role_id, [20]))							
                            <form method="POST" action="{{ url('add-reseller-user') }}" id="add-reseller-user" class="form-horizontal">
                            	<div class="form-group" style="display:none;">
									<label for="mac" class="col-sm-2 col-md-3 control-label">DB</label>
									<div class="col-sm-10 col-md-4">
										<input type="text" name="db" id="db" class="form-control" value="NOVDL" readonly>
								    </div>
								</div>
								<div class="form-group">
									<label for="mac" class="col-sm-2 col-md-3 control-label">Mac</label>
									<div class="col-sm-10 col-md-4">
										<input type="text" name="mac" id="mac" class="form-control">
										<span class="help-block" style="display:none;"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">Name</label>
									<div class="col-sm-10 col-md-4">
										<input type="text" name="name" id="name" class="form-control">
										<span class="help-block" style="display:none;"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">Account No.</label>
									<div class="col-sm-10 col-md-4">
										<input type="text" name="account_no" id="account_no" class="form-control">
										<span class="help-block" style="display:none;"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="phone" class="col-sm-2 col-md-3 control-label">Phone</label>
									<div class="col-sm-10 col-md-4">
										<input type="text" name="phone" id="phone" class="form-control">
										<span class="help-block" style="display:none;"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="status" class="col-sm-2 col-md-3 control-label">Status</label>
									<div class="col-sm-10 col-md-4">

										<select name="status" id="status" class="form-control">
											<option value="">Select Status</option>
											<option value="On">On</option>
											<option value="Off">Off</option>
										</select>
										<span class="help-block" style="display:none;"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">Credits</label>
									<div class="col-sm-10 col-md-4">
										<input type="text" name="credits" id="credits" class="form-control" onkeyup="setValidUntil(this);">
										<span class="help-block" style="display:none;"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">Valid Until</label>
									<div class="col-sm-10 col-md-4">
										<input type="text" name="valid_until" id="valid_until" class="form-control" readonly>
										<span class="help-block" style="display:none;"></span>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-4 col-sm-10">
										<button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
										<a href="{{ url('admin/reseller-users') }}" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
									</div>
								</div>
                            </form>
							@else
								<p> <strong>Please contact with SuperAdmin</strong></p>
							@endif
                        </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
		<div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
		</div>

  
      </div>
    </div>
	
  </section>
  
</div>

</div>

<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script type="text/javascript">
function setValidUntil(cur) {
	var availableCredits = {{ auth()->guard('admin')->user()->credits }};
	var dt = "{{ date('d/m/Y') }}";
	if(cur.value > availableCredits) {
		toastr.error('Credits entered must be less than available credits ie. ' + availableCredits );
		$("#valid_until").val('');
		return false;
	}

	$("#valid_until").val(addDaysToDate(dt, (cur.value * 30)));

	console.log(cur.value);
}

function addDaysToDate(dateStr, daysToAdd) {
    // Split the date string
    const [day, month, year] = dateStr.split('/').map(Number);

    // Create a Date object (note: months are 0-indexed in JS)
    const date = new Date(year, month - 1, day);

    // Add days
    date.setDate(date.getDate() + daysToAdd);

    // Format back to d/m/Y
    const newDay = String(date.getDate()).padStart(2, '0');
    const newMonth = String(date.getMonth() + 1).padStart(2, '0');
    const newYear = date.getFullYear();

    return `${newDay}/${newMonth}/${newYear}`;
}

$(function() {
	$('#add-reseller-user').on('submit', function(e) {
	  e.preventDefault(); 
	  $('.form-group').removeClass('has-error').find('.help-block').text('').hide();
	  var formData = $(this).serialize(); 
	  $.ajax({
	    url: '{{ url("admin/add-reseller-user") }}',
	    type: 'POST',
	    data: formData,
	    success: function(response) {
	      console.log('Success:', response);
	      if(response.status == 'success') {
	      	toastr.success(response.message);
	      	//alert('Data updated successfully');
	      	setTimeout(function() {
	      		location.assign('{{ url("admin/reseller-users") }}');
	      	}, 1000);
	      }
	    },
	    error: function(xhr, status, error) {
	      console.error('Response:', xhr.responseText);     // Raw response

	        // Optional: parse and show JSON error messages
	        if (xhr.status === 422) { // Laravel validation error
	            var errors = xhr.responseJSON.errors;
	            $.each(errors, function(field, messages) {
	            	//console.log(field, messages)
	            	$("#" + field).closest('.form-group').addClass('has-error').find('.help-block').text(messages[0]).show();
	                //alert(field + ': ' + messages.join(', '));
	            	//toastr.error(messages.join(', '));
	              //alert(messages.join(', '));
	            });
	        } else {
	        	//console.log(xhr, status, error)
	        	toastr.error(xhr.responseJSON.message);
	          //alert('An unexpected error occurred.');
	        }
	    }
	  });
	});
});
</script>

<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
  </script>
@endsection