@extends('layouts/layoutMaster')

@title('Maintenance Ticket Details')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold py-3 mb-0">
      <span class="text-muted fw-light">Maintenance /</span> Ticket #{{ $maintenance->id }}
    </h4>
    <a href="{{ route('maintenance.index') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i> Back to List
    </a>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible" role="alert">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <div class="row">
    <!-- Ticket Details Column -->
    <div class="col-md-8">
      <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center border-bottom">
          <div>
            <h5 class="mb-1">{{ $maintenance->title }}</h5>
            <small class="text-muted">Logged by {{ $maintenance->tenant->name }} on {{ $maintenance->created_at->format('M d, Y \a\t g:i A') }}</small>
          </div>
          <div>
            @if($maintenance->status === 'pending')
              <span class="badge bg-warning fs-6 px-3">Pending Review</span>
            @elseif($maintenance->status === 'assigned')
              <span class="badge bg-primary fs-6 px-3">Assigned</span>
            @else
              <span class="badge bg-success fs-6 px-3">Resolved</span>
            @endif
          </div>
        </div>
        <div class="card-body pt-4">
          <div class="row mb-4">
            <div class="col-sm-6">
              <span class="text-muted d-block mb-1">Property</span>
              <span class="fw-semibold text-body fs-5">{{ $maintenance->property->name }}</span>
            </div>
            <div class="col-sm-6">
              <span class="text-muted d-block mb-1">Unit / Room No</span>
              <span class="fw-semibold text-body fs-5">Unit {{ $maintenance->unit->unit_number }}</span>
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-sm-6">
              <span class="text-muted d-block mb-1">Category</span>
              <span class="badge bg-label-info text-capitalize fs-6">{{ $maintenance->category }}</span>
            </div>
            <div class="col-sm-6">
              <span class="text-muted d-block mb-1">Contact Phone</span>
              <span class="fw-semibold text-body fs-5">{{ $maintenance->tenant->phone_number ?? 'Not Available' }}</span>
            </div>
          </div>

          <div class="mb-4">
            <h6 class="text-muted mb-2">Description of the Issue</h6>
            <div class="p-3 bg-light rounded text-body whitespace-pre-wrap" style="white-space: pre-wrap;">{{ $maintenance->description }}</div>
          </div>

          @if($maintenance->photo_path)
            <div class="mb-2">
              <h6 class="text-muted mb-2">Uploaded Attachment</h6>
              <div class="border rounded p-2 text-center bg-light">
                <img src="{{ Storage::url($maintenance->photo_path) }}" alt="Issue attachment" class="img-fluid rounded" style="max-height: 400px; object-fit: contain;" />
              </div>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- Actions & Assignment Column -->
    <div class="col-md-4">
      <!-- Assigned Service Provider Info -->
      <div class="card mb-4">
        <div class="card-header border-bottom">
          <h5 class="mb-0">Assigned Provider</h5>
        </div>
        <div class="card-body pt-3">
          @if($maintenance->provider)
            <div class="d-flex align-items-center mb-3">
              <div class="avatar avatar-md me-3 bg-label-primary rounded-circle d-flex align-items-center justify-content-center">
                <i class="bi bi-tools fs-4"></i>
              </div>
              <div class="d-flex flex-column">
                <span class="fw-semibold text-body">{{ $maintenance->provider->name }}</span>
                <small class="text-muted">Service Representative</small>
              </div>
            </div>
            <p class="small text-muted mb-0"><i class="bi bi-envelope me-1"></i> {{ $maintenance->provider->email }}</p>
            @if($maintenance->provider->phone_number)
              <p class="small text-muted mb-0 mt-1"><i class="bi bi-telephone me-1"></i> {{ $maintenance->provider->phone_number }}</p>
            @endif
          @else
            <div class="text-center py-3">
              <i class="bi bi-exclamation-circle text-warning fs-1 mb-2"></i>
              <p class="mb-0 fw-semibold text-body">Unassigned Ticket</p>
              <p class="small text-muted">No maintenance service provider has been assigned to this ticket yet.</p>
            </div>
          @endif
        </div>
      </div>

      <!-- Action Panel Buttons -->
      @if(in_array(auth()->user()->role, ['admin', 'owner', 'manager']) && $maintenance->status !== 'resolved')
        <div class="card mb-4">
          <div class="card-header border-bottom">
            <h5 class="mb-0">Assign Service Provider</h5>
          </div>
          <div class="card-body pt-3">
            <form action="{{ route('maintenance.assign', $maintenance->id) }}" method="POST">
              @csrf
              <div class="mb-3">
                <label for="provider_id" class="form-label">Available Property Providers</label>
                <select class="form-select" id="provider_id" name="provider_id" required>
                  <option value="">Select service provider...</option>
                  @foreach($providers as $provider)
                    <option value="{{ $provider->id }}" {{ $maintenance->provider_id === $provider->id ? 'selected' : '' }}>
                      {{ $provider->name }} ({{ $provider->pivot->category }})
                    </option>
                  @endforeach
                </select>
              </div>
              <button type="submit" class="btn btn-primary w-100">
                <i class="bi bi-check-lg me-1"></i> Assign Provider
              </button>
            </form>
          </div>
        </div>
      @endif

      <!-- Contractor Quotation Card -->
      @if($maintenance->status !== 'pending')
        <div class="card mb-4">
          <div class="card-header border-bottom d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Contractor Quotation</h5>
            @if($maintenance->quote_status === 'approved')
              <span class="badge bg-success"><i class="bi bi-check-lg me-1"></i>Approved</span>
            @elseif($maintenance->quote_status === 'quoted')
              <span class="badge bg-warning"><i class="bi bi-clock me-1"></i>Pending Review</span>
            @elseif($maintenance->quote_status === 'rejected')
              <span class="badge bg-danger"><i class="bi bi-x-lg me-1"></i>Rejected</span>
            @else
              <span class="badge bg-label-secondary">No Quote</span>
            @endif
          </div>
          <div class="card-body pt-3">
            @if($maintenance->estimated_cost > 0)
              <div class="mb-3">
                <span class="text-muted small d-block">ESTIMATED REPAIR COST:</span>
                <strong class="fs-5 text-heading">Ksh {{ number_format($maintenance->estimated_cost, 2) }}</strong>
                @if($maintenance->quote_notes)
                  <div class="p-2 bg-light rounded small mt-2 text-body">{{ $maintenance->quote_notes }}</div>
                @endif
              </div>
            @endif

            <!-- Landlord / Manager Quote Approval / Rejection -->
            @if($maintenance->quote_status === 'quoted' && in_array(auth()->user()->role, ['admin', 'owner', 'manager']))
              <div class="d-flex gap-2 mb-3">
                <form action="{{ route('maintenance.quote.approve', $maintenance->id) }}" method="POST" class="w-100">
                  @csrf
                  <button type="submit" class="btn btn-success w-100 btn-sm">
                    <i class="bi bi-check-lg me-1"></i> Approve Quote
                  </button>
                </form>
                <form action="{{ route('maintenance.quote.reject', $maintenance->id) }}" method="POST" class="w-100">
                  @csrf
                  <button type="submit" class="btn btn-outline-danger w-100 btn-sm">
                    <i class="bi bi-x-lg me-1"></i> Reject
                  </button>
                </form>
              </div>
            @endif

            <!-- Provider Quote Submission Form -->
            @if($maintenance->status !== 'resolved' && (auth()->user()->role === 'admin' || (auth()->user()->role === 'provider' && $maintenance->provider_id === auth()->id())) && $maintenance->quote_status !== 'approved')
              <form action="{{ route('maintenance.quote', $maintenance->id) }}" method="POST">
                @csrf
                <div class="mb-2">
                  <label for="estimated_cost" class="form-label small fw-semibold">Estimated Cost (Material + Labor)</label>
                  <input type="number" step="0.01" name="estimated_cost" id="estimated_cost" class="form-control form-control-sm" value="{{ $maintenance->estimated_cost }}" placeholder="0.00" required />
                </div>
                <div class="mb-3">
                  <label for="quote_notes" class="form-label small fw-semibold">Quote Scope / Parts Breakdown</label>
                  <textarea name="quote_notes" id="quote_notes" rows="2" class="form-control form-control-sm" placeholder="E.g. PVC pipe 1.5 inch + labor replacement" required>{{ $maintenance->quote_notes }}</textarea>
                </div>
                <button type="submit" class="btn btn-outline-primary btn-sm w-100">
                  <i class="bi bi-send me-1"></i> Submit Quotation
                </button>
              </form>
            @endif
          </div>
        </div>
      @endif

      <!-- Provider Resolution Controls -->
      @if($maintenance->status !== 'resolved' && (auth()->user()->role === 'admin' || (auth()->user()->role === 'provider' && $maintenance->provider_id === auth()->id()) || (in_array(auth()->user()->role, ['owner', 'manager']) && $maintenance->status === 'assigned')))
        <div class="card mb-4">
          <div class="card-header border-bottom">
            <h5 class="mb-0">Complete & Resolve Job</h5>
          </div>
          <div class="card-body pt-3">
            <p class="small text-muted">Confirm final repair cost. An expense record will automatically be posted to the property remittance ledger.</p>
            <form action="{{ route('maintenance.resolve', $maintenance->id) }}" method="POST">
              @csrf
              <div class="mb-3">
                <label for="actual_cost" class="form-label small fw-semibold">Final Incurred Cost (Ksh)</label>
                <input type="number" step="0.01" name="actual_cost" id="actual_cost" class="form-control form-control-sm" value="{{ $maintenance->actual_cost ?? $maintenance->estimated_cost }}" placeholder="0.00" />
              </div>
              <button type="submit" class="btn btn-success w-100" onclick="return confirm('Resolve ticket and post expense deduction to owner remittance?');">
                <i class="bi bi-check-circle me-1"></i> Mark as Resolved
              </button>
            </form>
          </div>
        </div>
      @endif

      <!-- Resolution Summary & Expense Ledger Link -->
      @if($maintenance->status === 'resolved')
        <div class="card mb-4">
          <div class="card-header border-bottom bg-light py-3">
            <h5 class="mb-0 text-success"><i class="bi bi-check-circle me-1"></i>Job Completed & Resolved</h5>
          </div>
          <div class="card-body pt-3">
            @if($maintenance->actual_cost > 0)
              <span class="text-muted small d-block">TOTAL REPAIR EXPENSE:</span>
              <h4 class="text-heading fw-bold mb-2">Ksh {{ number_format($maintenance->actual_cost, 2) }}</h4>
              <div class="alert alert-info py-2 small mb-0">
                <i class="bi bi-file-earmark-bar-graph me-1"></i> Auto-booked to Property Expense Ledger for landlord monthly remittance deduction.
              </div>
            @endif
          </div>
        </div>

        <!-- Tenant Satisfaction Rating -->
        <div class="card">
          <div class="card-header border-bottom">
            <h5 class="mb-0"><i class="bi bi-star-fill me-1 text-warning"></i>Tenant Quality Review</h5>
          </div>
          <div class="card-body pt-3">
            @if($maintenance->tenant_rating)
              <div class="d-flex align-items-center mb-2">
                <span class="fs-4 text-warning me-2">
                  @for($i = 1; $i <= 5; $i++)
                    {!! $i <= $maintenance->tenant_rating ? '&#9733;' : '&#9734;' !!}
                  @endfor
                </span>
                <span class="badge bg-label-primary">{{ $maintenance->tenant_rating }} / 5 Stars</span>
              </div>
              @if($maintenance->tenant_feedback)
                <div class="p-2 bg-light rounded small text-body">{{ $maintenance->tenant_feedback }}</div>
              @endif
            @elseif(auth()->user()->role === 'tenant' && $maintenance->tenant_id === auth()->id())
              <form action="{{ route('maintenance.rate', $maintenance->id) }}" method="POST">
                @csrf
                <div class="mb-3">
                  <label for="tenant_rating" class="form-label small fw-semibold">Service Quality Rating</label>
                  <select name="tenant_rating" id="tenant_rating" class="form-select form-select-sm" required>
                    <option value="5">&#9733;&#9733;&#9733;&#9733;&#9733; (5/5) Excellent Repair</option>
                    <option value="4">&#9733;&#9733;&#9733;&#9733;&#9734; (4/5) Good Work</option>
                    <option value="3">&#9733;&#9733;&#9733;&#9734;&#9734; (3/5) Average</option>
                    <option value="2">&#9733;&#9733;&#9734;&#9734;&#9734; (2/5) Unsatisfactory</option>
                    <option value="1">&#9733;&#9734;&#9734;&#9734;&#9734; (1/5) Poor</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label for="tenant_feedback" class="form-label small fw-semibold">Comments / Feedback</label>
                  <textarea name="tenant_feedback" id="tenant_feedback" rows="2" class="form-control form-control-sm" placeholder="How was the technician's response and repair quality?"></textarea>
                </div>
                <button type="submit" class="btn btn-primary btn-sm w-100">
                  <i class="bi bi-hand-thumbs-up me-1"></i> Submit Review
                </button>
              </form>
            @else
              <p class="small text-muted mb-0">Tenant satisfaction review pending.</p>
            @endif
          </div>
        </div>
      @endif
    </div>
  </div>
</div>
@endsection