@extends('admin.main')  
@section('content')  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

<div class="row">
   <div class="col-md-12">
      <div class="card">
         <div class="card-header">
            <h4 class="">Procedure<a href="{{ route('hospitals.index') }}" class="btn btn-primary float-right">Back</a>
               <button class="btn btn-primary addRow float-right mr-2" data-toggle="modal" data-target="#addNewProcedure">Add New</button> 
            </h4>
         </div>
         <div class="card-body">
               @include('admin.msg')
            <div class="form-group">
               <label for="city_id">City Name: {{isset($hospital->city)?$hospital->city->name:''}}</label>
            </div>
            <div class="form-group">
               <label for="name">Hospital Name: {{$hospital->name}}</label>
            </div>
            <br>
            <div class="row">
               <div class="col-md-12">
                  <div class="table-responsive">
                     <table class="display table-striped table table-bordered" id="complex_header_table">
                        <thead>
                           <tr>
                              <th>#</th>
                              <th>Procedure Name</th>
                              <th>Action</th>
                           </tr>
                        </thead>
                        <tbody id="add_rooms">
                           @if(!empty($room_procedures))
                           @foreach($room_procedures as $procedure_id=>$val)
                           <tr row-id="{{$loop->index+1}}">
                              <td>{{$loop->index+1}}</td>
                              <td>
                                 @if(!empty($procedure))
                                 @php $p_id = ''; @endphp
                                 @foreach($procedure as $in=>$list)
                                 @if($procedure_id == $list->id)
                                 {{$list->name}}
                                 @php $p_id = $procedure_id; @endphp
                                 @endif
                                 @endforeach
                                 @endif
                              </td>
                              <td>
                                <button class="btn btn-primary btn-sm text-white editProcedure" data-hospital_id ="{{$hospital->id}}" data-p_id="{{ $p_id }}" data-toggle="modal" data-target="#editProcedure"><i class="i-Pen-2"></i></button> 
                              </td>
                           </tr>
                           @endforeach                                                       
                           @endif
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal fade" id="addNewProcedure">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Procedure </h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <form method="POST" action="{{ route('hospitals.procedureUpdate') }}">
            <input type="hidden" name="hospital_id" value="{{ $hospital->id }}">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <label for="name">Procedure Name</label>
                    <select class="form-control" name="procedure_id" id="procedure_id" required>
                        <option value="" selected disabled hidden>Select procedure</option>
                        @if(!empty($procedure))
                            @foreach($procedure as $in=>$list)
                            <option value="{{$list->id}}">{{$list->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="border p-3">
                    <div class="row">
                        @if(!empty($rooms))
                           @foreach($rooms as $index=>$val)
                            <div class="col-md-4 form-group">
                                <label for="{{$val->name}}_{{$index}}">{{$val->name}}</label>
                                <input type="text" name="price[{{$val->id}}]" class="form-control" id="{{$val->name}}_{{$index}}" placeholder="Enter {{$val->name}}" required>
                            </div>
                            @endforeach
                        @endif   
                        <div class="col-md-12 form-group">
                            <label for="incusion">Incusion</label>
                            <input type="text" name="incusion" data-role="tagsinput" class="form-control" placeholder="Enter Text">
                        </div> 
                        <div class="col-md-12 form-group">
                            <label for="exclusion">Exclusion</label>
                            <input type="text" name="exclusion" data-role="tagsinput" class="form-control" placeholder="Enter Text">
                        </div> 
                        <div class="col-md-12 form-group">
                            <label for="notes">Notes</label>
                            <textarea class="form-control html_editor" id="notes" rows="4" name="notes" placeholder="Enter Text"></textarea>
                        </div> 
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Submit</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </form>
      </div>
    </div>
</div>

<div class="modal fade" id="editProcedure">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Procedure </h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <form method="POST" action="{{ route('hospitals.procedureUpdate') }}">
            <input type="hidden" name="hospital_id" value="{{ $hospital->id }}">
            @csrf
            <div class="modal-body"></div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Submit</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </form>
      </div>
    </div>
</div>

<style>
    .bootstrap-tagsinput {
      width: 100%;
      min-height: 92px;
      line-height: 22px;
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    }

    .bootstrap-tagsinput .tag {
      margin-right: 2px;
      color: white;
      background-color: #663399;
      padding: 3px 6px;
      border-radius: 4px;
    }
</style>

<script>
    $(document).on('click', '.editProcedure', function(e) {
        e.preventDefault(); 
        var hospital_id = $(this).data('hospital_id');
        var p_id = $(this).data('p_id');
        var token = "{{ csrf_token() }}";
        $.ajax({
            url: "{{ route('hospitals.edit-procedure') }}",       
            type: 'POST',
            data: {
                hospital_id: hospital_id,
                p_id: p_id,
                _token: token 
            },
            success: function(res) {
                $('#editProcedure .modal-body').html(res);
                $('.edit_html_editor').summernote({
                   height: 300,                 
                   minHeight: null,            
                   maxHeight: null,           
                   focus: true                 
                 });
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
            }
        });

    });
</script>

@endsection