@extends(auth()->user()->role == 'admin' ? 'layouts.admin' : 'layouts.app')

@section('content')
<style>
    .page-header {
        background: linear-gradient(90deg, #ff8a00 0%, #ff5e00 100%);
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-top: 20px;
        margin-bottom: 30px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
    .page-header h1 { font-weight: 700; font-size: 2rem; margin-bottom: 5px; display: flex; align-items: center; }
    .page-header h1 i { margin-right: 15px; }
    .page-header p { opacity: 0.9; margin-bottom: 0; }
    .custom-card { border-radius: 15px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; }
    .btn-custom { border-radius: 10px; padding: 8px 20px; font-weight: 600; transition: all 0.3s; }
    .header-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; }
    .header-btn:hover { background: white; color: #ff5e00; }
    .nav-tabs-custom .nav-link { border: none; color: #757575; font-weight: 600; padding: 10px 20px; border-radius: 10px; margin-right: 5px; }
    .nav-tabs-custom .nav-link.active { background-color: #fff3e0; color: #ff5e00; }
    @media (max-width: 768px) {
        .page-header { padding: 20px; }
        .page-header .d-flex.justify-content-between {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 15px;
        }
        .header-btn { width: 100%; text-align: center; }
    }
    /* Autocomplete Adjustment */
    .autocomplete-wrapper { position: relative; }
    .autocomplete-results { 
        position: absolute; 
        top: 100%; 
        left: 0; 
        right: 0; 
        z-index: 1000; 
        background: white; 
        border: 1px solid #ced4da; 
        border-top: none; 
        border-radius: 0 0 10px 10px; 
        max-height: 200px; 
        overflow-y: auto; 
        display: none; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .autocomplete-item { 
        padding: 10px 15px; 
        cursor: pointer; 
        transition: background 0.2s; 
    }
    .autocomplete-item:hover { background-color: #fff3e0; color: #ff5e00; }
    .autocomplete-item.active { background-color: #ff5e00; color: white; }
</style>

<div class="container-fluid px-4">
    <div class="page-header shadow">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1><i class="fas fa-cash-register"></i> Laporan Penjualan</h1>
                <p>Ringkasan transaksi pendapatan harian cabang</p>
            </div>
        </div>
    </div>
    <div class="card custom-card mb-4 mt-2">
        <div class="card-body p-3 shadow-sm">
            <form action="{{ url()->current() }}" method="GET" class="row align-items-end">
                <div class="col-md-3">
                    <label class="small font-weight-bold text-muted"><i class="fas fa-calendar-alt mr-1"></i> Tahun</label>
                    <select name="year" class="form-control form-control-sm">
                        <option value="">Semua Tahun</option>
                        @for($y = date('Y'); $y >= 2020; $y--)
                            <option value="{{ $y }}" {{ request('year') == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="small font-weight-bold text-muted"><i class="fas fa-moon mr-1"></i> Bulan</label>
                    <select name="month" class="form-control form-control-sm">
                        <option value="">Semua Bulan</option>
                        @php
                            $months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        @endphp
                        @foreach($months as $i => $m)
                            <option value="{{ $i + 1 }}" {{ request('month') == ($i + 1) ? 'selected' : '' }}>{{ $m }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="small font-weight-bold text-muted"><i class="fas fa-calendar-day mr-1"></i> Hari</label>
                    <select name="day" class="form-control form-control-sm">
                        <option value="">Semua</option>
                        @for($d = 1; $d <= 31; $d++)
                            <option value="{{ $d }}" {{ request('day') == $d ? 'selected' : '' }}>{{ $d }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-4">
                    <div class="d-flex justify-content-between">
                        <div class="btn-group btn-group-sm flex-grow-1 mr-2">
                            <button type="submit" class="btn btn-warning text-white">
                                <i class="fas fa-check-circle mr-1"></i> Terapkan Filter
                            </button>
                            <a href="{{ url()->current() }}" class="btn btn-secondary">
                                <i class="fas fa-undo mr-1"></i> Reset
                            </a>
                        </div>
                        @if(auth()->user()->role == 'admin')
                        <a href="{{ url()->current() }}/export-pdf?{{ http_build_query(request()->all()) }}" class="btn btn-sm btn-danger">
                            <i class="fas fa-file-pdf mr-1"></i> Export PDF
                        </a>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>


<div class="content">
    <div class="container-fluid">
        <!-- Alerts -->
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        @if(auth()->user()->role == 'admin')
            <div class="card custom-card">
                <div class="card-header bg-white p-3 border-0">
                    <h5 class="mb-0 font-weight-bold"><i class="fas fa-list mr-2 text-warning"></i> Data Gabungan Semua Cabang</h5>
                </div>
                <div class="card-body table-responsive p-0">
                     @include('partials.table_penjualan', ['sales' => $sales, 'readonly' => true, 'showBranch' => true])
                </div>
            </div>
        @else
            <!-- KARYAWAN VIEW -->
            <div class="card custom-card">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 font-weight-bold"><i class="fas fa-list mr-2 text-warning"></i> Daftar Transaksi Penjualan - {{ Auth::user()->branch }}</h5>
                </div>
                <div class="card-body table-responsive p-0">
                    @include('partials.table_penjualan', ['sales' => $sales])
                </div>
            </div>
        @endif
    </div>
</div>

@endsection