@extends('layouts/main-layout')
@section('content')
<style>
  .alert {
    display: flex;
    justify-content: unset;
    border: solid;
    outline: inset;
  }

  .error {
    color: red;
  }
</style>

<div class="container" style="padding: 20px;">
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </div>
  @elseif($message = Session::get('error'))
  <div class="alert alert-danger">
    <p>{{ $message }}</p>
  </div>
  @endif
  <div class="row">

    <form id="myform" class="row g-3" action="{{route('doctor-create')}}" method="Post" enctype="multipart/form-data">
      @csrf
      <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Name</label>
        <input type="text" class="form-control" name="name" id="inputEmail4">
      </div>
      <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Speciality</label>
        <select name="speciality" class="form-dropdown">
          <option value="">select the option</option>
          @foreach($specialitys as $data)
          <option value="{{$data->id}}">{{$data->speciality}}</option>
          @endforeach
        </select>
      </div>
       <div class="col-12">
        <label for="about" class="form-label">About</label>
        <textarea id="about" name="about" class="form-control" placeholder=""></textarea>
      
      </div>
      <div class="col-12">
        <label for="inputAddress" class="form-label">Qualification</label>
        <input type="text" class="form-control" name="qualification" id="inputAddress" placeholder="">
      </div>
      <div class="col-12">
        <label for="inputAddress2" class="form-label">Designation</label>
        <input type="text" class="form-control" name="designation" id="inputAddress2" placeholder="">
      </div>
      <div class="col-md-6">
        <label for="inputCity" class="form-label">Location</label>
        <input type="text" class="form-control" name="location" id="inputCity">
      </div>
      <div class="col-md-6 mt-2">
        <label class="form-check-label">Please select</label>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="book_appointment" value="1" id="flexCheckDefault">
          <label class="form-check-label" for="flexCheckDefault">
            Booka An Appointment Button
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="video_consult" value="1" id="flexCheckChecked">
          <label class="form-check-label" for="flexCheckChecked">
            Video Consultant Button
          </label>
        </div>
      </div>
      <div class="col-md-6 mt-3">
        <label for="image">Profile Link</label>
        <input type="text" class="form-control" name="book_appointment_url" placeholder="ex.dr-name">
      </div>
      <div class="col-md-6 mt-3">
        <label for="image">Video Consult Link</label>
        <input type="text" class="form-control" name="video_consult_url" placeholder="">
      </div>
      <div class="col-md-6 mt-3">
        <label for="image">Profile Image</label>
        <input type="file" name="image"  class="form-control">
          <span id="errorimage" style="color: #f04124;"></span>
      </div>
      <div class="col-md-6 mt-3">
      </div>
      <div class="field_wrapper">
      <div class="row">
    <!--   <div class="col-md-6 mt-3">
        <label for="icon">Section Icon</label>
        <input type="file" name="section_icon[]" class="form-control" >
      </div>
      <div class="col-md-6 mt-3">
        <label for="title">Section Title</label>
        <input type="text" class="form-control" name="section_title[]" placeholder="">
      </div>
      <div class="col-md-6 mt-3">
        <label for="title">Section Description</label>
        <input type="text" class="form-control" name="section_description[]" placeholder="">
      </div> -->

        <div class="col-md-6 mt-3">
        <label for="icon">Section Icon</label>
        <input type="file" name="section_icon[]" class="form-control" >
      </div>
      <div class="col-md-6 mt-3">
        <label for="title">Section Title</label>
        <input type="text" class="form-control" name="section_title[]" placeholder="">
      </div>
      <div class="col-md-6 mt-3">
        <label for="title">Section Description</label>
        <input type="text" class="form-control" name="section_description[]" placeholder="">
      </div>

      <div class="col-md-6 mt-3">
        <button type="button" class="btn btn-primary form-control remove d-none">Remove</button>
      </div>
      </div>
     </div>
    
  </div>
  <div class="col-md-6 mt-3">
      <button type="button" class="btn btn-primary form-control add_button" id="add_button">Add More</button>
    </div>
    <div class="col-md-12 mt-3">
      <button type="submit" class="form-control btn-primary">Add</button>
    </div>
    </div>
</div>
@endsection
@section('custom-js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myform').validate({
      rules: {
        name: {
          required: true,
        },
        speciality: {
          required: true,
        },
        qualification: {
          required: true,
        },
        designation: {
          required: true,
        },
        location: {
          required: true,
        },
        image: {
          required: true,
          accept: "png|jpg|jpeg|gif"
        },
        icon: {
          required: true,
        },
        section_title: {
          required: true,
        },
        section_description: {
          required: true,
        }
      }
    });
    $('input[name="image"]').change(function() {
      var file = $(this).val();
      var ext = file.substr((file.lastIndexOf('.') + 1));

      switch (ext) {
        case 'png':
        case 'jpg':
        case 'jpeg':
        case 'gif':
          $("#errorimage").text('');
          break;
        default:
          $("#errorimage").text("Please select valid image with proper extension")
          this.value = '';
      }
    });
    // $('#myform').append('<input type="text" name="icon" id="icon" />');
    // $('#myform').append('<input type="text" name="section_title" id="section_title" />');
    // $('#myform').append('<input type="text" name="section_description" id="section_description" />');
  });
</script>
@endsection


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = ' <div class="row"><div class="col-md-6 mt-3"><label for="icon">Section Icon</label><input type="file" name="section_icon[]" class="form-control"></div><div class="col-md-6 mt-3"><label for="title">Section Title</label><input type="text" class="form-control" name="section_title[]" placeholder=""></div><div class="col-md-6 mt-3"><label for="title">Section Description</label><input type="text" class="form-control" name="section_description[]" placeholder=""></div><div class="col-md-6 mt-3"><button type="submit"   class="btn btn-primary form-control remove_button">Remove</button></div></div>';

    // var fieldHTML = ' <div class="row"><div class="col-md-6 mt-3"><label for="icon">Section Icon</label><input type="file" name="section_icon" class="form-control"></div><div class="col-md-6 mt-3"><label for="title">Section Title</label><input type="text" class="form-control" name="section_title" placeholder=""></div><div class="col-md-6 mt-3"><label for="title">Section Description</label><input type="text" class="form-control" name="section_description" placeholder=""></div><div class="col-md-6 mt-3"><button type="submit"   class="btn btn-primary form-control remove_button">Remove</button></div></div>';

    var x = 1; //Initial field counter is 1
      
    // Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increase field counter
            $(wrapper).append(fieldHTML); //Add field html
        }else{
            alert('A maximum of '+maxField+' fields are allowed to be added. ');
        }
    });
    
    // Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).closest('.row').remove(); //Remove field html
        x--; //Decrease field counter
    });
});
</script>

 
</body>
</html>