@extends('layouts.main')
@section('content')
<style>
   /* ===============================
   BUTTON DESIGN SYSTEM
   ================================ */
   .btn-add{
   background:#0d6efd;
   color:#fff;
   border:none;
   border-radius:8px;
   padding:6px 14px;
   font-size:14px;
   transition:.25s;
   }
   .btn-add:hover{
   background:#0b5ed7;
   transform:translateY(-2px);
   }
   /* SAVE BUTTON */
   .btn-save{
   background:#198754;
   color:#fff;
   border:none;
   border-radius:8px;
   padding:6px 14px;
   }
   .btn-save:hover{
   background:#157347;
   }
   /* ROLE BADGE */
   .role-badge{
   background:#eef2ff;
   padding:6px 10px;
   border-radius:6px;
   font-size:13px;
   }
</style>
<div class="container-fluid">
   <!-- Page Header -->
   <div class="d-flex justify-content-between align-items-center mb-3">
      <h4 class="fw-bold mb-0">Corporate Client</h4>
      @can('clinic_create')
      <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addClinicModal">
      <i class="bi bi-plus-circle"></i> Add Corporate Client
      </button>
      @endcan
   </div>
   {{-- =========================
   CLINIC TABLE
   ========================== --}}
   @can('clinic_view')
   <div class="card shadow-sm border-0">
      <div class="card-body p-0">
         <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
               <thead class="table-light">
                  <tr>
                     <th width="60">ID</th>
                     <th>Trade Name</th>
                     <th>Email</th>
                     <th>Mobile</th>
                     <th>Website</th>
                     <th>Photos</th>
                     <th width="120" class="text-end">Action</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($clinics as $clinic)
                  <tr>
                     <td>{{ $clinic->id }}</td>
                     <td>
                        <span class="role-badge">
                        {{ $clinic->trade_name }}
                        </span>
                     </td>
                     <td>{{ $clinic->email }}</td>
                     <td>{{ $clinic->mobile }}</td>
                     <td>
                        @if($clinic->website)
                        <a href="{{ $clinic->website }}" target="_blank">
                        {{ $clinic->website }}
                        </a>
                        @endif
                     </td>
                     {{-- PHOTOS --}}
                     <td>
                        <div class="d-flex">
                           @php
                           $photos = is_array($clinic->photos)
                           ? $clinic->photos
                           : json_decode($clinic->photos ?? '[]', true);
                           @endphp
                           @foreach($photos as $photo)
                           <img
                              src="{{ asset('clinic/'.$photo) }}"
                              width="50"
                              height="50"
                              class="rounded border me-1"
                              >
                           @endforeach
                        </div>
                     </td>
                     {{-- ACTION --}}
                     <td class="text-end">
                        @canany(['clinic_edit','clinic_delete'])
                        <div class="dropdown">
                           <button class="btn btn-light btn-sm" data-bs-toggle="dropdown">
                           <i class="bi bi-three-dots-vertical"></i>
                           </button>
                           <ul class="dropdown-menu dropdown-menu-end">
                              @can('clinic_edit')
                              <li>
                                 <a class="dropdown-item"
                                    href="{{ route('superadmin.clinic.edit',$clinic->id) }}">
                                 <i class="bi bi-pencil me-2"></i> Edit
                                 </a>
                              </li>
                              @endcan
                              @can('clinic_delete')
                              <li>
                                 <form action="{{ route('superadmin.clinic.delete',$clinic->id) }}"
                                    method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                       class="dropdown-item text-danger">
                                    <i class="bi bi-trash me-2"></i> Delete
                                    </button>
                                 </form>
                              </li>
                              @endcan
                           </ul>
                        </div>
                        @endcanany
                     </td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="7"
                        class="text-center text-muted py-4">
                        No Clinics Found
                     </td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
   </div>
   @endcan
</div>
{{-- =====================================
ADD CLINIC MODAL
===================================== --}}

@can('clinic_create')
<div class="modal fade" id="addClinicModal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form action="{{ route('superadmin.clinic.store') }}"
            method="POST"
            enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">
                  Add Clinic / Business
               </h5>
               <button type="button"
                  class="btn-close"
                  data-bs-dismiss="modal">
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-md-6 mb-3">
                     <label class="form-label">Trade Name</label>
                     <input type="text"
                        name="trade_name"
                        class="form-control"
                        required>
                  </div>
                  <div class="col-md-6 mb-3">
                     <label class="form-label">GST No</label>
                     <input type="text"
                        name="gst_no"
                        class="form-control">
                  </div>
                  <div class="col-md-6 mb-3">
                     <label class="form-label">
                     License Certification No
                     </label>
                     <input type="text"
                        name="license_no"
                        class="form-control">
                  </div>
                  <div class="col-md-6 mb-3">
                     <label class="form-label">Email</label>
                     <input type="email"
                        name="email"
                        class="form-control">
                  </div>
                  <div class="col-md-6 mb-3">
                     <label class="form-label">
                     Mobile Number
                     </label>
                     <input type="text"
                        name="mobile"
                        class="form-control">
                  </div>
                  <div class="col-md-6 mb-3">
                     <label class="form-label">Website</label>
                     <input type="text"
                        name="website"
                        class="form-control">
                  </div>
                  {{-- CATEGORY --}}
                  <div class="col-md-6 mb-3">
                     <label class="form-label">Category</label>
                     <select name="category_id"
                        class="form-select">
                        <option value="">
                           Select Category
                        </option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}">
                           {{ $category->name }}
                        </option>
                        @endforeach
                     </select>
                  </div>
                  {{-- SUBCATEGORY --}}
                  <div class="col-md-6 mb-3">
                     <label class="form-label">
                     Subcategory
                     </label>
                     <select name="subcategory_id"
                        class="form-select">
                        <option value="">
                           Select Subcategory
                        </option>
                        @foreach($subcategories as $sub)
                        <option value="{{ $sub->id }}">
                           {{ $sub->name }}
                        </option>
                        @endforeach
                     </select>
                  </div>
                  {{-- PHOTOS --}}
                  <div class="col-md-12 mb-3">
                     <label class="form-label">
                     Photos of Business
                     </label>
                     <input type="file"
                        name="photos[]"
                        multiple
                        class="form-control">
                  </div>
               </div>
            </div>
            <div class="modal-footer">
               <button type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal">
               Cancel
               </button>
               <button type="submit"
                  class="btn-save">
               Save Clinic
               </button>
            </div>
         </form>
      </div>
   </div>
</div>
@endcan
@endsection