@extends('layouts.app')
@section('title', $customer->name)
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <h5 class="fw-bold mb-0">{{ $customer->name }} <span class="badge text-bg-light">{{ $customer->code }}</span></h5>
  <div>
    <a href="{{ route('customers.edit', $customer) }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-pencil"></i> {{ __('app.edit') }}</a>
    <form method="POST" action="{{ route('customers.archive', $customer) }}" class="d-inline">@csrf
      <button class="btn btn-outline-warning btn-sm"><i class="bi bi-archive"></i> {{ $customer->is_archived ? __('customers.unarchive') : __('customers.archive') }}</button>
    </form>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-4">
    <div class="card mb-3"><div class="card-body text-center">
      @if($customer->photo)
        <img src="{{ asset('storage/' . $customer->photo) }}" class="rounded-circle mb-2" style="width:96px;height:96px;object-fit:cover">
      @else
        <div class="rounded-circle bg-primary-subtle d-inline-flex align-items-center justify-content-center mb-2" style="width:96px;height:96px"><i class="bi bi-person fs-1 text-primary"></i></div>
      @endif
      <h6 class="fw-bold mb-0">{{ $customer->name }}</h6>
      <div class="text-secondary small" dir="ltr">{{ $customer->phone }}</div>
      <div class="d-flex justify-content-center gap-4 mt-3">
        <div><div class="fw-bold">{{ money($customer->total_purchases) }}</div><div class="small text-secondary">{{ __('customers.total_purchases') }}</div></div>
        <div><div class="fw-bold {{ $customer->balance > 0 ? 'text-danger' : 'text-success' }}">{{ money($customer->balance) }}</div><div class="small text-secondary">{{ __('customers.balance') }}</div></div>
      </div>
      <img class="mt-3" src="https://api.qrserver.com/v1/create-qr-code/?size=110x110&data={{ urlencode($customer->code) }}" alt="QR">
    </div></div>

    <div class="card"><div class="card-body">
      <h6 class="fw-bold">{{ __('customers.attachments') }}</h6>
      @foreach($customer->attachments as $file)
        <a href="{{ asset('storage/' . $file->path) }}" target="_blank" class="d-block small py-1"><i class="bi bi-paperclip"></i> {{ $file->name }}</a>
      @endforeach
      <form method="POST" action="{{ route('customers.attachments.store', $customer) }}" enctype="multipart/form-data" class="mt-2 d-flex gap-2">
        @csrf
        <input type="file" name="file" class="form-control form-control-sm" required>
        <button class="btn btn-sm btn-outline-primary">{{ __('app.add') }}</button>
      </form>
    </div></div>
  </div>

  <div class="col-lg-8">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#rx">{{ __('customers.prescriptions') }}</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#sales">{{ __('customers.purchases') }}</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#orders">{{ __('orders.orders') }}</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#visits">{{ __('customers.visits') }}</button></li>
    </ul>
    <div class="tab-content border border-top-0 rounded-bottom p-3 bg-body">

      <div class="tab-pane fade show active" id="rx">
        <button class="btn btn-sm btn-primary mb-3" data-bs-toggle="collapse" data-bs-target="#rxForm"><i class="bi bi-plus-lg"></i> {{ __('prescriptions.add') }}</button>
        <div class="collapse mb-3" id="rxForm">
          <form method="POST" action="{{ route('prescriptions.store', $customer) }}" class="card card-body row g-2">
            @csrf
            <div class="row g-2">
              <div class="col-12 fw-bold small text-secondary">{{ __('prescriptions.od') }}</div>
              <div class="col"><input name="od_sphere" class="form-control form-control-sm" placeholder="SPH" step="0.25" type="number"></div>
              <div class="col"><input name="od_cylinder" class="form-control form-control-sm" placeholder="CYL" step="0.25" type="number"></div>
              <div class="col"><input name="od_axis" class="form-control form-control-sm" placeholder="AXIS" type="number"></div>
              <div class="col"><input name="od_prism" class="form-control form-control-sm" placeholder="PRISM" step="0.25" type="number"></div>
              <div class="col"><input name="od_add" class="form-control form-control-sm" placeholder="ADD" step="0.25" type="number"></div>
            </div>
            <div class="row g-2">
              <div class="col-12 fw-bold small text-secondary">{{ __('prescriptions.os') }}</div>
              <div class="col"><input name="os_sphere" class="form-control form-control-sm" placeholder="SPH" step="0.25" type="number"></div>
              <div class="col"><input name="os_cylinder" class="form-control form-control-sm" placeholder="CYL" step="0.25" type="number"></div>
              <div class="col"><input name="os_axis" class="form-control form-control-sm" placeholder="AXIS" type="number"></div>
              <div class="col"><input name="os_prism" class="form-control form-control-sm" placeholder="PRISM" step="0.25" type="number"></div>
              <div class="col"><input name="os_add" class="form-control form-control-sm" placeholder="ADD" step="0.25" type="number"></div>
            </div>
            <div class="row g-2">
              <div class="col-md-2"><input name="pd_distance" class="form-control form-control-sm" placeholder="{{ __('prescriptions.pd_distance') }}" step="0.5" type="number"></div>
              <div class="col-md-2"><input name="pd_near" class="form-control form-control-sm" placeholder="{{ __('prescriptions.pd_near') }}" step="0.5" type="number"></div>
              <div class="col-md-2"><input name="lens_type" class="form-control form-control-sm" placeholder="{{ __('prescriptions.lens_type') }}"></div>
              <div class="col-md-2"><input name="frame_type" class="form-control form-control-sm" placeholder="{{ __('prescriptions.frame_type') }}"></div>
              <div class="col-md-2"><input name="doctor" class="form-control form-control-sm" placeholder="{{ __('prescriptions.doctor') }}"></div>
              <div class="col-md-2"><input type="date" name="date" value="{{ now()->toDateString() }}" class="form-control form-control-sm" required></div>
            </div>
            <div class="row g-2">
              <div class="col-md-10"><input name="notes" class="form-control form-control-sm" placeholder="{{ __('app.notes') }}"></div>
              <div class="col-md-2"><button class="btn btn-sm btn-primary w-100">{{ __('app.save') }}</button></div>
            </div>
          </form>
        </div>

        @forelse($customer->prescriptions->sortByDesc('date') as $rx)
        <div class="card mb-2"><div class="card-body py-2">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="fw-bold small">{{ $rx->date->format('Y-m-d') }} @if($rx->doctor)— {{ $rx->doctor }}@endif</span>
            <a href="{{ route('prescriptions.print', $rx) }}" target="_blank" class="btn btn-sm btn-outline-secondary"><i class="bi bi-printer"></i></a>
          </div>
          <div class="table-responsive"><table class="table table-sm table-bordered mb-1 text-center small">
            <thead><tr><th></th><th>SPH</th><th>CYL</th><th>AXIS</th><th>PRISM</th><th>ADD</th></tr></thead>
            <tbody>
              <tr><th>OD</th><td>{{ $rx->od_sphere }}</td><td>{{ $rx->od_cylinder }}</td><td>{{ $rx->od_axis }}</td><td>{{ $rx->od_prism }}</td><td>{{ $rx->od_add }}</td></tr>
              <tr><th>OS</th><td>{{ $rx->os_sphere }}</td><td>{{ $rx->os_cylinder }}</td><td>{{ $rx->os_axis }}</td><td>{{ $rx->os_prism }}</td><td>{{ $rx->os_add }}</td></tr>
            </tbody>
          </table></div>
          <div class="small text-secondary">PD: {{ $rx->pd_distance }} / {{ $rx->pd_near }} @if($rx->lens_type) — {{ $rx->lens_type }}@endif @if($rx->notes) — {{ $rx->notes }}@endif</div>
        </div></div>
        @empty
        <p class="text-secondary small">{{ __('app.no_data') }}</p>
        @endforelse
      </div>

      <div class="tab-pane fade" id="sales">
        @forelse($customer->sales->sortByDesc('date') as $sale)
          <a href="{{ route('sales.show', $sale) }}" class="d-flex justify-content-between border-bottom py-2 small text-decoration-none text-body">
            <span>{{ $sale->number }} — {{ $sale->date->format('Y-m-d') }}</span>
            <span class="fw-bold">{{ money($sale->total) }}</span>
          </a>
        @empty
          <p class="text-secondary small">{{ __('app.no_data') }}</p>
        @endforelse
      </div>

      <div class="tab-pane fade" id="orders">
        @forelse($customer->orders->sortByDesc('created_at') as $order)
          <a href="{{ route('orders.show', $order) }}" class="d-flex justify-content-between border-bottom py-2 small text-decoration-none text-body">
            <span>{{ $order->number }}</span>
            <span class="badge text-bg-{{ order_status_color($order->status) }}">{{ order_status_label($order->status) }}</span>
          </a>
        @empty
          <p class="text-secondary small">{{ __('app.no_data') }}</p>
        @endforelse
      </div>

      <div class="tab-pane fade" id="visits">
        <form method="POST" action="{{ route('customers.visits.store', $customer) }}" class="d-flex gap-2 mb-3">
          @csrf
          <input name="notes" class="form-control form-control-sm" placeholder="{{ __('app.notes') }}" required>
          <button class="btn btn-sm btn-primary">{{ __('customers.add_visit') }}</button>
        </form>
        @forelse($customer->visits->sortByDesc('created_at') as $visit)
          <div class="border-bottom py-2 small">
            <span class="text-secondary">{{ $visit->created_at->format('Y-m-d H:i') }} — {{ $visit->user->name ?? '' }}</span>
            <div>{{ $visit->notes }}</div>
          </div>
        @empty
          <p class="text-secondary small">{{ __('app.no_data') }}</p>
        @endforelse
      </div>

    </div>
  </div>
</div>
@endsection