@extends('layouts.app')

@section('title', 'Revenue Reports')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <span class="text-slate-700 font-medium">Revenue Reports</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header -->
  <div>
    <h1 class="text-3xl font-bold text-slate-900">Revenue Reports</h1>
    <p class="text-slate-600 mt-1">Analyze revenue trends and department performance</p>
  </div>

  <!-- Filters -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">From Date</label>
        <input type="date" value="{{ now()->subMonths(12)->format('Y-m-d') }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">To Date</label>
        <input type="date" value="{{ now()->format('Y-m-d') }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Revenue Source</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="">All Sources</option>
          <option value="rooms">Room Revenue</option>
          <option value="restaurant">Restaurant</option>
          <option value="banquet">Banquet & Conference</option>
          <option value="other">Other</option>
        </select>
      </div>
      <div class="flex items-end">
        <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
          Generate Report
        </button>
      </div>
    </div>
  </div>

  <!-- Summary Cards -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Total Revenue</p>
      <p class="text-3xl font-bold text-green-600 mt-2">$420,500</p>
      <p class="text-xs text-slate-500 mt-2">↑ 15% from last year</p>
    </div>
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Room Revenue</p>
      <p class="text-3xl font-bold text-blue-600 mt-2">$280,000</p>
      <p class="text-xs text-slate-500 mt-2">66.6% of total</p>
    </div>
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Restaurant Revenue</p>
      <p class="text-3xl font-bold text-purple-600 mt-2">$95,000</p>
      <p class="text-xs text-slate-500 mt-2">22.6% of total</p>
    </div>
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Other Revenue</p>
      <p class="text-3xl font-bold text-orange-600 mt-2">$45,500</p>
      <p class="text-xs text-slate-500 mt-2">10.8% of total</p>
    </div>
  </div>

  <!-- Revenue Chart -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <h3 class="font-semibold text-slate-900 mb-4">Monthly Revenue Trend</h3>
    <div class="h-64 flex items-center justify-center bg-slate-50 rounded-lg border border-slate-200">
      <svg class="w-full h-full" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
        <!-- Y-axis -->
        <line x1="50" y1="30" x2="50" y2="250" stroke="#cbd5e1" stroke-width="2"/>
        <!-- X-axis -->
        <line x1="50" y1="250" x2="750" y2="250" stroke="#cbd5e1" stroke-width="2"/>
        <!-- Chart bars -->
        <rect x="80" y="180" width="30" height="70" fill="#0369a1"/>
        <rect x="130" y="170" width="30" height="80" fill="#0369a1"/>
        <rect x="180" y="160" width="30" height="90" fill="#0369a1"/>
        <rect x="230" y="150" width="30" height="100" fill="#0369a1"/>
        <rect x="280" y="140" width="30" height="110" fill="#0369a1"/>
        <rect x="330" y="135" width="30" height="115" fill="#0369a1"/>
        <rect x="380" y="130" width="30" height="120" fill="#0369a1"/>
        <rect x="430" y="125" width="30" height="125" fill="#0369a1"/>
        <rect x="480" y="120" width="30" height="130" fill="#0369a1"/>
        <rect x="530" y="115" width="30" height="135" fill="#0369a1"/>
        <rect x="580" y="110" width="30" height="140" fill="#0369a1"/>
        <rect x="630" y="100" width="30" height="150" fill="#0369a1"/>
        <!-- Labels -->
        <text x="95" y="270" font-size="12" fill="#64748b">Jan</text>
        <text x="145" y="270" font-size="12" fill="#64748b">Feb</text>
        <text x="195" y="270" font-size="12" fill="#64748b">Mar</text>
        <text x="245" y="270" font-size="12" fill="#64748b">Apr</text>
        <text x="295" y="270" font-size="12" fill="#64748b">May</text>
        <text x="345" y="270" font-size="12" fill="#64748b">Jun</text>
        <text x="395" y="270" font-size="12" fill="#64748b">Jul</text>
        <text x="445" y="270" font-size="12" fill="#64748b">Aug</text>
        <text x="495" y="270" font-size="12" fill="#64748b">Sep</text>
        <text x="545" y="270" font-size="12" fill="#64748b">Oct</text>
        <text x="595" y="270" font-size="12" fill="#64748b">Nov</text>
        <text x="645" y="270" font-size="12" fill="#64748b">Dec</text>
      </svg>
    </div>
  </div>

  <!-- Revenue Breakdown -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- By Department -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h3 class="font-semibold text-slate-900 mb-4">Revenue by Department</h3>
      <div class="space-y-4">
        <div>
          <div class="flex justify-between mb-2">
            <span class="text-sm font-medium text-slate-700">Rooms</span>
            <span class="text-sm font-semibold text-slate-900">$280,000 (66.6%)</span>
          </div>
          <div class="w-full bg-slate-200 rounded-full h-2">
            <div class="bg-blue-600 h-2 rounded-full" style="width: 66.6%"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between mb-2">
            <span class="text-sm font-medium text-slate-700">Restaurant</span>
            <span class="text-sm font-semibold text-slate-900">$95,000 (22.6%)</span>
          </div>
          <div class="w-full bg-slate-200 rounded-full h-2">
            <div class="bg-purple-600 h-2 rounded-full" style="width: 22.6%"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between mb-2">
            <span class="text-sm font-medium text-slate-700">Banquet & Conference</span>
            <span class="text-sm font-semibold text-slate-900">$35,000 (8.3%)</span>
          </div>
          <div class="w-full bg-slate-200 rounded-full h-2">
            <div class="bg-orange-600 h-2 rounded-full" style="width: 8.3%"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between mb-2">
            <span class="text-sm font-medium text-slate-700">Parking & Other</span>
            <span class="text-sm font-semibold text-slate-900">$10,500 (2.5%)</span>
          </div>
          <div class="w-full bg-slate-200 rounded-full h-2">
            <div class="bg-green-600 h-2 rounded-full" style="width: 2.5%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Comparison -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h3 class="font-semibold text-slate-900 mb-4">Period Comparison</h3>
      <div class="space-y-4">
        <div class="bg-blue-50 rounded-lg p-4">
          <p class="text-sm text-blue-700">Current Period (Jan - Dec 2024)</p>
          <p class="text-2xl font-bold text-blue-900 mt-1">$420,500</p>
        </div>
        <div class="bg-slate-50 rounded-lg p-4">
          <p class="text-sm text-slate-700">Previous Period (Jan - Dec 2023)</p>
          <p class="text-2xl font-bold text-slate-900 mt-1">$365,000</p>
        </div>
        <div class="bg-green-50 rounded-lg p-4">
          <p class="text-sm text-green-700">Year-over-Year Growth</p>
          <p class="text-2xl font-bold text-green-900 mt-1">+15.2% ($55,500)</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Export Options -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <h3 class="font-semibold text-slate-900 mb-4">Export Options</h3>
    <div class="flex flex-wrap gap-3">
      <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 flex items-center space-x-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span>Export as Excel</span>
      </button>
      <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 flex items-center space-x-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span>Export as PDF</span>
      </button>
    </div>
  </div>
</div>
@endsection