@extends('Admin.layouts.app')
@section('title', 'Add Service')

@section('content')
      

        

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Add Service</h1>
<!-- DataTales Example -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary"><a href="{{route('admin.services')}}"><i class="fa fa-chevron-left"></i></a>Add Service</h6>
    </div>
   
    <div class="card-body">
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
    @if(Session::has('error'))
    <div class="alert alert-danger">
    {{ session('error') }}
    </div>
    @endif
    <form method="post" action="{{ route('admin.service.add') }}" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" value="{{ old('name') }}" name="name" id="name" placeholder="Enter Service" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="price">Price</label>
                <input type="number" class="form-control"  value="{{ old('price') }}" id="price" name="price" placeholder="Enter Price" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="type">Type</label>
                <select class="form-control" id="type" name="type">
                <option value="" selected disabled>Select Service Type</option>
                    <option value="online" {{ old('type') == 'online' ? 'selected' : '' }}>Online</option>
                    <option value="physical" {{ old('type') == 'physical' ? 'selected' : '' }}>Physical</option>
                    <option value="all" {{ old('type') == 'all' ? 'selected' : '' }}>All</option>
                </select>

            </div>
        </div>
        <div class="col-lg-12">
            <div class="form-group">
                <button class="btn-gazna" style="height:50px;font-size:14px;" type="submit">Save Service</button>
            </div>
        </div>
    </div>
</form>

    </div>
</div>
@endsection
@push('body-scripts')
    <script>
         var price = document.getElementById("price");
         price.addEventListener("keydown", function(event) {
          // Allow Backspace
              if (event.key === "Backspace") {
                return;
              }

         if (!/^[\d()+\s]*$/.test(event.key)) {
          event.preventDefault();
          return;
        }
        // Check the length of the input value
        if (price.value.length >= 6 && event.key.length === 1) {

          event.preventDefault();
        }
      });
 $(function(){
        $('#showimg').hide();
    });
    function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            // $('#oldimg').hide();
            $('#showimg').show();
            $('#showimg').attr('src', e.target.result);
          
        }
        reader.readAsDataURL(input.files[0]);
    }
}
    $('#img').on('change',function(){
      $('#error_msg').hide();
        readURL(this);
    });
    </script>
@endpush