@extends('layouts.main')
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
   .card{border-radius:12px;}
   .table th{font-size:13px;text-transform:uppercase;color:#6c757d;}
   .avatar{width:40px;height:40px;border-radius:50%;}
   .action-btns button{margin-right:5px;}
</style>
<div class="container-fluid py-4">
   <!-- HEADER -->
   <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
         <h4 class="fw-bold mb-1">Consultants</h4>
         <small class="text-muted">Manage clinic consultants</small>
      </div>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addConsultantModal">
      <i class="bi bi-plus-circle me-1"></i> Add Consultant
      </button>
   </div>
   <!-- TABLE -->
   <div class="card shadow-sm border-0">
      <div class="card-body p-0">
         @if($clinics->count())
         <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
               <thead class="table-light">
                  <tr>
                     <th>ID</th>
                     <th>Doctor</th>
                     <th>Clinic</th>
                     <th>Phone</th>
                     <th>Email</th>
                     <th>Action</th>
                  </tr>
               </thead>
               <tbody>
                  @foreach($clinics as $clinic)
                  <tr>
                     <td>#{{ $clinic->id }}</td>
                     <td>
                        <div class="d-flex align-items-center">
                           <img src="{{ asset('/user.png') }}" class="avatar me-2">
                           <div>
                              <div class="fw-semibold">
                                 {{ optional($clinic->doctor)->first_name ?? 'N/A' }}
                              </div>
                              <small class="text-muted">
                              {{ $clinic->specialization ?? '-' }}
                              </small>
                           </div>
                        </div>
                     </td>
                     <td>{{ $clinic->trade_name }}</td>
                     <td>{{ $clinic->mobile }}</td>
                     <td>{{ $clinic->email ?? '-' }}</td>
                     <td class="action-btns">
                        <!-- EDIT -->
                        <button class="btn btn-sm btn-light border editBtn"
                           data-id="{{ $clinic->id }}"
                           data-consultant_id="{{ $clinic->consultant_id }}"
                           data-trade_name="{{ $clinic->trade_name }}"
                           data-specialization="{{ $clinic->specialization }}"
                           data-mobile="{{ $clinic->mobile }}"
                           data-email="{{ $clinic->email }}"
                           data-status="{{ $clinic->status }}"
                           data-bs-toggle="modal"
                           data-bs-target="#editModal">
                        <i class="bi bi-pencil text-primary"></i>
                        </button>
                        <!-- DELETE -->
                        <form action="{{ route('counsellor.delete',$clinic->id) }}" method="POST" class="d-inline">
                           @csrf
                           @method('DELETE')
                           <button onclick="return confirm('Delete?')" class="btn btn-sm btn-light border">
                           <i class="bi bi-trash text-danger"></i>
                           </button>
                        </form>
                     </td>
                  </tr>
                  @endforeach
               </tbody>
            </table>
         </div>
         @else
         <div class="text-center p-5 text-muted">No Consultants Found</div>
         @endif
      </div>
   </div>
</div>
<!-- ================= ADD MODAL ================= -->
<div class="modal fade" id="addConsultantModal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5>Add Consultant</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <form method="POST" action="{{ route('counsellor.store') }}">
            @csrf
            <div class="modal-body row g-3">
               <div class="col-md-6">
                  <label>Clinic Name *</label>
                  <input name="trade_name" class="form-control" required>
               </div>
               <div class="col-md-6">
                  <label>Doctor</label>
                  <select name="consultant_id" class="form-control">
                     @foreach($consultants as $Consultant)
                     <option value="{{ $Consultant->id }}">{{ $Consultant->first_name }}</option>
                     @endforeach
                  </select>
               </div>
               <div class="col-md-6">
                  <label>Mobile *</label>
                  <input name="mobile" class="form-control" required>
               </div>
               <div class="col-md-6">
                  <label>Email</label>
                  <input name="email" class="form-control">
               </div>
               <div class="col-md-6">
                  <label>Specialization</label>
                  <input name="specialization" class="form-control">
               </div>
            </div>
            <div class="modal-footer">
               <button class="btn btn-primary">Save</button>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- ================= EDIT MODAL ================= -->
<div class="modal fade" id="editModal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5>Edit Consultant</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <form method="POST" id="editForm" action="" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="modal-body row g-3">
               <div class="col-md-6">
                  <label>Clinic Name</label>
                  <input name="trade_name" id="edit_trade_name" class="form-control">
               </div>
               <div class="col-md-6">
                  <label>Doctor</label>
                  <select name="consultant_id" id="edit_consultant_id" class="form-control">
                     @foreach($consultants as $Consultant)
                     <option value="{{ $Consultant->id }}">{{ $Consultant->first_name }}</option>
                     @endforeach
                  </select>
               </div>
               <div class="col-md-6">
                  <label>Mobile</label>
                  <input name="mobile" id="edit_mobile" class="form-control">
               </div>
               <div class="col-md-6">
                  <label>Email</label>
                  <input name="email" id="edit_email" class="form-control">
               </div>
               <div class="col-md-6">
                  <label>Specialization</label>
                  <input name="specialization" id="edit_specialization" class="form-control">
               </div>
            </div>
            <div class="modal-footer">
               <button class="btn btn-primary">Update</button>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- ================= SCRIPT ================= -->
<script>
   $(document).ready(function(){
   
       $(document).on('click', '.editBtn', function(){
   
           let btn = $(this);
   
           // Fill data
           $('#edit_trade_name').val(btn.data('trade_name'));
           $('#edit_specialization').val(btn.data('specialization'));
           $('#edit_mobile').val(btn.data('mobile'));
           $('#edit_email').val(btn.data('email'));
            $('#edit_consultant_id').val(btn.data('consultant_id'));
   
           // SET CORRECT URL
           let id = btn.data('id');
           let url = "{{ route('counsellor.update', ':id') }}";
           url = url.replace(':id', id);
   
           console.log(url); // DEBUG
   
           $('#editForm').attr('action', url);
   
       });
   
   });
</script>
@endsection