@extends('layouts.app')

@section('title', 'Quotations')
@section('page', 'sales')
@section('salesNav', 'quotations')

@php
  $rows = [
    ['id' => 1, 'quote' => 'QT-4412', 'date' => '2026-07-13', 'customer' => 'Corporate Catering Co', 'valid' => '2026-07-20', 'items' => 12, 'total' => 860.00, 'status' => 'Sent'],
    ['id' => 2, 'quote' => 'QT-4411', 'date' => '2026-07-13', 'customer' => 'City Hall Events', 'valid' => '2026-07-18', 'items' => 8, 'total' => 1240.50, 'status' => 'Draft'],
    ['id' => 3, 'quote' => 'QT-4410', 'date' => '2026-07-12', 'customer' => 'Nova Tech Office', 'valid' => '2026-07-19', 'items' => 5, 'total' => 420.00, 'status' => 'Accepted'],
    ['id' => 4, 'quote' => 'QT-4409', 'date' => '2026-07-12', 'customer' => 'Harbor Hotel', 'valid' => '2026-07-17', 'items' => 20, 'total' => 3180.00, 'status' => 'Sent'],
    ['id' => 5, 'quote' => 'QT-4408', 'date' => '2026-07-11', 'customer' => 'Green School PTA', 'valid' => '2026-07-16', 'items' => 6, 'total' => 295.75, 'status' => 'Expired'],
    ['id' => 6, 'quote' => 'QT-4407', 'date' => '2026-07-11', 'customer' => 'Jordan Miles', 'valid' => '2026-07-18', 'items' => 3, 'total' => 98.00, 'status' => 'Converted'],
    ['id' => 7, 'quote' => 'QT-4406', 'date' => '2026-07-10', 'customer' => 'Summit Wellness', 'valid' => '2026-07-17', 'items' => 10, 'total' => 670.00, 'status' => 'Sent'],
    ['id' => 8, 'quote' => 'QT-4405', 'date' => '2026-07-10', 'customer' => 'Ava Lopez', 'valid' => '2026-07-15', 'items' => 2, 'total' => 54.00, 'status' => 'Rejected'],
    ['id' => 9, 'quote' => 'QT-4404', 'date' => '2026-07-09', 'customer' => 'Blue River Bank', 'valid' => '2026-07-16', 'items' => 15, 'total' => 1890.25, 'status' => 'Accepted'],
    ['id' => 10, 'quote' => 'QT-4403', 'date' => '2026-07-09', 'customer' => 'Ryan West', 'valid' => '2026-07-14', 'items' => 4, 'total' => 146.00, 'status' => 'Converted'],
    ['id' => 11, 'quote' => 'QT-4402', 'date' => '2026-07-08', 'customer' => 'Studio Nine', 'valid' => '2026-07-15', 'items' => 7, 'total' => 512.40, 'status' => 'Draft'],
    ['id' => 12, 'quote' => 'QT-4401', 'date' => '2026-07-08', 'customer' => 'Mia Chen', 'valid' => '2026-07-13', 'items' => 3, 'total' => 78.50, 'status' => 'Expired'],
  ];
  $statusVariant = fn ($s) => match ($s) {
    'Accepted', 'Converted' => 'success',
    'Sent' => 'info',
    'Draft' => 'warning',
    'Rejected', 'Expired' => 'danger',
    default => 'neutral',
  };
@endphp

@section('content')
  <div class="app-content__header">
    <div>
      <h1 class="page-title">Quotations</h1>
      <p class="page-subtitle">Estimates before conversion to sales</p>
    </div>
    <div class="app-content__actions">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#quotationModal">
        <i class="bi bi-plus-lg"></i><span class="d-none d-sm-inline"> New quotation</span>
      </button>
    </div>
  </div>

  @include('partials.sales-nav')

  <div class="row g-3 g-lg-4 mb-4">
    <div class="col-6 col-xl-3"><x-stat-card label="Open quotes" value="6" icon="bi-file-earmark-text" icon-variant="primary" trend="2" trend-direction="up" trend-meta="this week" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Accepted" value="4" icon="bi-check2-circle" icon-variant="success" trend="1" trend-direction="up" trend-meta="MTD" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Conversion rate" value="58%" icon="bi-arrow-left-right" icon-variant="info" trend="4%" trend-direction="up" trend-meta="vs last month" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Pipeline value" value="$9.4k" icon="bi-currency-dollar" icon-variant="warning" trend="11%" trend-direction="up" trend-meta="open quotes" /></div>
  </div>

  <x-data-table id="quotations-table" title="Quotations" subtitle="Customer estimates · Downtown Branch" :page-size="10">
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target="#quotationModal"><i class="bi bi-plus-lg"></i> New quotation</button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All statuses</option>
        <option>Draft</option><option>Sent</option><option>Accepted</option><option>Converted</option><option>Rejected</option><option>Expired</option>
      </select>
    </x-slot:filters>
    <x-slot:bulkActions>
      <button type="button" class="btn btn-soft-primary btn-sm" data-edt-bulk-action="export">Export selected</button>
      <button type="button" class="btn btn-outline-secondary btn-sm" data-edt-bulk-action="send">Mark sent</button>
      <button type="button" class="btn btn-outline-danger btn-sm" data-edt-bulk-action="expire">Expire</button>
    </x-slot:bulkActions>
    <x-slot:head>
      <x-data-table-th label="Quote #" col="quote" :filterable="true" />
      <x-data-table-th label="Date" col="date" :filterable="true" />
      <x-data-table-th label="Customer" col="customer" :filterable="true" />
      <x-data-table-th label="Valid until" col="valid" :filterable="true" />
      <x-data-table-th label="Lines" col="items" sort-type="number" />
      <x-data-table-th label="Total" col="total" sort-type="number" />
      <x-data-table-th label="Status" col="status" :filterable="true" type="select" filter-options="Draft|Sent|Accepted|Converted|Rejected|Expired" />
    </x-slot:head>
    <x-slot:body>
      @foreach ($rows as $row)
        <tr data-id="{{ $row['id'] }}">
          <td data-col="quote" class="cell-primary">{{ $row['quote'] }}</td>
          <td data-col="date">{{ $row['date'] }}</td>
          <td data-col="customer">{{ $row['customer'] }}</td>
          <td data-col="valid">{{ $row['valid'] }}</td>
          <td data-col="items">{{ $row['items'] }}</td>
          <td data-col="total">{{ money($row['total']) }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($row['status'])">{{ $row['status'] }}</x-badge></td>
          <td data-edt-actions><x-action-dropdown :id="$row['id']" /></td>
        </tr>
      @endforeach
    </x-slot:body>
  </x-data-table>

  <x-ui-modal id="quotationModal" title="New quotation" form-id="quotation-form">
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label" for="quote_customer">Customer</label><input type="text" class="form-control" id="quote_customer" name="customer" required></div>
      <div class="col-md-3"><label class="form-label" for="quote_date">Date</label><input type="date" class="form-control" id="quote_date" name="date" value="2026-07-13" required></div>
      <div class="col-md-3"><label class="form-label" for="quote_valid">Valid until</label><input type="date" class="form-control" id="quote_valid" name="valid_until" value="2026-07-20" required></div>
      <div class="col-md-8"><label class="form-label" for="quote_item">Item / package</label><input type="text" class="form-control" id="quote_item" name="item" required></div>
      <div class="col-md-2"><label class="form-label" for="quote_qty">Qty</label><input type="number" class="form-control" id="quote_qty" name="qty" min="1" value="1" required></div>
      <div class="col-md-2"><label class="form-label" for="quote_price">Price</label><input type="number" step="0.01" class="form-control" id="quote_price" name="price" min="0" value="0"></div>
      <div class="col-12"><label class="form-label" for="quote_notes">Notes</label><textarea class="form-control" id="quote_notes" name="notes" rows="2" placeholder="Optional terms"></textarea></div>
    </div>
    <x-alert class="mt-3 mb-0" variant="info" icon="bi-info-circle">UI only — quotation is not saved.</x-alert>
  </x-ui-modal>
@endsection

@push('scripts')
  <script src="{{ asset('assets/js/pages/sales.js') }}"></script>
@endpush