@extends('layouts/main-layout')
@section('content')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
  .alert {
    display: flex;
    justify-content: unset;
    border: solid;
    outline: inset;
  }

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

<div class="container">
  <div class="row">
    @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
    <form id="myform" class="row g-3" action="{{route('doctor-update',$doctor->id)}}" 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" value="{{$doctor->doctor_name}}">
      </div>
      <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Speciality</label>
        <select name="speciality" class="form-dropdown">
          <option value="{{$doctor->speciality->id}}" selected>{{$doctor->speciality->speciality}}</option>
          @foreach($specialitys as $data)
          <option value="{{$data->id}}">{{$data->speciality}}</option>
          @endforeach
        </select>
      </div>
      <div class="col-12">
        <label for="inputAddress" class="form-label">Qualification</label>
        <input type="text" class="form-control" name="qualification" id="inputAddress" value="{{$doctor->qualification}}">
      </div>
      <div class="col-12">
        <label for="inputAddress2" class="form-label">Designation</label>
        <input type="text" class="form-control" name="designation" id="inputAddress2" value="{{$doctor->designation}}">
      </div>
      <div class="col-md-6">
        <label for="inputCity" class="form-label">Location</label>
        <input type="text" class="form-control" name="location" id="inputCity" value="{{$doctor->location}}">
      </div>
      <div class="col-md-4">
        <label class="form-check-label">Please select</label>
        <div class="form-check">
          <input type='checkbox' value='1' name='book_appointment'>  <label class='form-check-label' for='flexCheckDefault'>
               Booka An Appointment Button
             </label>        </div>
        <div class="form-check">
          <input type='checkbox' value='1' name='video_consult'>  <label class='form-check-label' for='flexCheckDefault'>
            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" value="{{$doctor->book_appointment_url}}">
      </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" value="{{$doctor->video_consult_url}}">
      </div>
      <div class="col-md-6">
        <label for="image">Profile Image</label>
        @if(isset($doctor->image_src) && !empty($doctor->image_src))
        <img src="/assets/images/doctor/{{$doctor->image_src}}" width="100px">
        <a href="{{route('doctor-image',$doctor->id)}}">Remove</a>
        @endif
        <input type="file" name="image">
      </div>

      <div class="col-md-6">
       
      </div>

       <div class="field_wrapper">
      <div class="row">
      <div class="col-md-6 mt-3">
        <label for="icon">Section Icon</label>
     
         @if(isset($doctor->section_icon) && !empty($doctor->section_icon))
        <img src="/assets/images/doctor/{{$doctor->section_icon}}" width="100px">
        
        @endif
        <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" value="{{$doctor->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" value="{{$doctor->section_description}}" placeholder="">
      </div>
      <div class="col-md-6 mt-3">
        <button type="button" class="btn btn-primary form-control remove_button">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">
        <button type="submit" class="form-control btn btn-primary">update</button>
      </div>
    </form>
  </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,
        }
      }
    });
  });
</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="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>