@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Order Management</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item active">Orders</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-1"></i>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-octagon me-1"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card info-card sales-card">
                    <div class="card-body">
                        <h5 class="card-title">Total</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-clipboard-data"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $stats['total'] }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card info-card customers-card">
                    <div class="card-body">
                        <h5 class="card-title">Draft</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-file-earmark"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $stats['draft'] }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card info-card revenue-card">
                    <div class="card-body">
                        <h5 class="card-title">Assigned</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-person-check"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $stats['assigned'] }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card info-card">
                    <div class="card-body">
                        <h5 class="card-title">In Progress</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #ff6b35;">
                                <i class="bi bi-gear-fill text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $stats['in_progress'] }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card info-card">
                    <div class="card-body">
                        <h5 class="card-title">Completed</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #28a745;">
                                <i class="bi bi-check-circle-fill text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $stats['completed'] }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card info-card">
                    <div class="card-body">
                        <h5 class="card-title">Overdue</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #dc3545;">
                                <i class="bi bi-exclamation-triangle-fill text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $stats['overdue'] }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body pt-3">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="card-title">Daftar Orders</h5>
                            <div>
                                @if($stats['overdue'] > 0)
                                    <a href="{{ route('orders.index') }}?status=assigned" class="btn btn-warning me-2">
                                        <i class="bi bi-exclamation-triangle"></i> Overdue ({{ $stats['overdue'] }})
                                    </a>
                                @endif
                                <a href="{{ route('orders.create') }}" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> New Order
                                </a>
                            </div>
                        </div>

                        <!-- Filters -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <form method="GET" action="{{ route('orders.index') }}" id="filterForm">
                                    <div class="row g-2">
                                        <div class="col-md-2">
                                            <label class="form-label small mb-1">Status</label>
                                            <select name="status" class="form-select form-select-sm">
                                                <option value="">Semua Status</option>
                                                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                                <option value="assigned" {{ request('status') == 'assigned' ? 'selected' : '' }}>Assigned</option>
                                                <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>Accepted</option>
                                                <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                                <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label small mb-1">Jenis</label>
                                            <select name="type" class="form-select form-select-sm">
                                                <option value="">Semua Jenis</option>
                                                <option value="psb" {{ request('type') == 'psb' ? 'selected' : '' }}>PSB</option>
                                                <option value="umum" {{ request('type') == 'umum' ? 'selected' : '' }}>Tiket Umum</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label small mb-1">Kategori</label>
                                            <select name="sub_category" class="form-select form-select-sm">
                                                <option value="">Semua Kategori</option>
                                                <option value="psb" {{ request('sub_category') == 'psb' ? 'selected' : '' }}>PSB</option>
                                                <option value="gangguan" {{ request('sub_category') == 'gangguan' ? 'selected' : '' }}>Gangguan</option>
                                                <option value="dismantle" {{ request('sub_category') == 'dismantle' ? 'selected' : '' }}>Dismantle</option>
                                                <option value="relokasi" {{ request('sub_category') == 'relokasi' ? 'selected' : '' }}>Relokasi</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label small mb-1">Teknisi</label>
                                            <select name="teknisi_id" class="form-select form-select-sm">
                                                <option value="">Semua Teknisi</option>
                                                @foreach($teknisis as $teknisi)
                                                    <option value="{{ $teknisi->id }}" {{ request('teknisi_id') == $teknisi->id ? 'selected' : '' }}>
                                                        {{ $teknisi->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label small mb-1">Prioritas</label>
                                            <select name="priority" class="form-select form-select-sm">
                                                <option value="">Semua Prioritas</option>
                                                <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                                <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                                <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
                                                <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label small mb-1">Cari</label>
                                            <input type="text" name="search" class="form-control form-control-sm" placeholder="Cari order..." value="{{ request('search') }}">
                                        </div>
                                    </div>
                                    
                                    <!-- Location Filters Row -->
                                    <div class="row g-2 mt-2">
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">Provinsi</label>
                                            <select name="province_code" id="province_filter" class="form-select form-select-sm">
                                                <option value="">Semua Provinsi</option>
                                                @foreach($provinces as $province)
                                                    <option value="{{ $province->province_code }}" {{ request('province_code') == $province->province_code ? 'selected' : '' }}>
                                                        {{ $province->province_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">Kabupaten/Kota</label>
                                            <select name="regency_code" id="regency_filter" class="form-select form-select-sm" {{ !request('province_code') ? 'disabled' : '' }}>
                                                <option value="">Semua Kabupaten/Kota</option>
                                                @foreach($regencies as $regency)
                                                    <option value="{{ $regency->regency_code }}" {{ request('regency_code') == $regency->regency_code ? 'selected' : '' }}>
                                                        {{ $regency->regency_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">Kecamatan</label>
                                            <select name="district_code" id="district_filter" class="form-select form-select-sm" {{ !request('regency_code') ? 'disabled' : '' }}>
                                                <option value="">Semua Kecamatan</option>
                                                @foreach($districts as $district)
                                                    <option value="{{ $district->district_code }}" {{ request('district_code') == $district->district_code ? 'selected' : '' }}>
                                                        {{ $district->district_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">Desa/Kelurahan</label>
                                            <select name="village_code" id="village_filter" class="form-select form-select-sm" {{ !request('district_code') ? 'disabled' : '' }}>
                                                <option value="">Semua Desa/Kelurahan</option>
                                                @foreach($villages as $village)
                                                    <option value="{{ $village->village_code }}" {{ request('village_code') == $village->village_code ? 'selected' : '' }}>
                                                        {{ $village->village_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="row g-2 mt-2">
                                        <div class="col-md-6">
                                            <button type="submit" class="btn btn-primary btn-sm w-100">
                                                <i class="bi bi-funnel"></i> Terapkan Filter
                                            </button>
                                        </div>
                                        <div class="col-md-6">
                                            <a href="{{ route('orders.index') }}" class="btn btn-secondary btn-sm w-100">
                                                <i class="bi bi-x-circle"></i> Reset Filter
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @if($orders->count() > 0)
                            <!-- Per Page Filter -->
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <label class="form-label small mb-0 me-2 d-inline">Tampilkan:</label>
                                            <select id="perPageSelect" class="form-select form-select-sm d-inline-block" style="width: auto;">
                                                <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                                                <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                                                <option value="15" {{ request('per_page') == 15 ? 'selected' : '' }}>15</option>
                                                <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                                            </select>
                                            <span class="small ms-2">data per halaman</span>
                                        </div>
                                        <div class="small text-muted">
                                            Menampilkan {{ $orders->firstItem() ?? 0 }} - {{ $orders->lastItem() ?? 0 }} dari {{ $orders->total() }} data
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Order #</th>
                                            <th>Klien</th>
                                            <th>Jenis / Kategori</th>
                                            <th>Judul</th>
                                            <th>Teknisi</th>
                                            <th>Status</th>
                                            <th>Prioritas</th>
                                            <th>Tanggal Status</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($orders as $order)
                                        <tr class="{{ $order->isResponseOverdue() ? 'table-warning' : '' }}">
                                            <td>
                                                <strong>{{ $order->order_number }}</strong>
                                                @if($order->isResponseOverdue())
                                                    <br><small class="text-danger"><i class="bi bi-clock"></i> Overdue</small>
                                                @endif
                                            </td>
                                            <td>
                                                <strong>{{ $order->client_name }}</strong><br>
                                                <small class="text-muted">{{ $order->client_phone }}</small>
                                            </td>
                                            <td>
                                                {!! $order->type_badge !!}
                                                <br>{!! $order->sub_category_badge !!}
                                            </td>
                                            <td>
                                                <div class="fw-bold">{{ Str::limit($order->title, 30) }}</div>
                                                <small class="text-muted">{{ Str::limit($order->description, 50) }}</small>
                                            </td>
                                            <td>
                                                @if($order->tipe_petugas === 'rombongan' && $order->assignedRombongan)
                                                    <strong><i class="bi bi-people-fill"></i> {{ $order->assignedRombongan->name }}</strong>
                                                    <br><small class="text-muted">
                                                        <i class="bi bi-person-badge"></i> Ketua: {{ $order->assignedRombongan->ketua ? $order->assignedRombongan->ketua->name : '-' }}
                                                    </small>
                                                    @if($order->assignedRombongan->ketua && $order->assignedRombongan->ketua->inventarisTools->where('status', 'in_use')->count() > 0)
                                                        <br><small class="text-success">
                                                            <i class="bi bi-tools"></i> Tools: {{ $order->assignedRombongan->ketua->inventarisTools->where('status', 'in_use')->count() }} item
                                                        </small>
                                                    @endif
                                                    @php
                                                        // Filter anggota, exclude ketua
                                                        $anggotaOnly = $order->assignedRombongan->activeMembers->filter(function($member) use ($order) {
                                                            return $member->user_id != $order->assignedRombongan->ketua_id;
                                                        });
                                                        $totalToolsAnggota = $anggotaOnly->sum(function($member) {
                                                            return $member->user && $member->user->inventarisTools ? $member->user->inventarisTools->where('status', 'in_use')->count() : 0;
                                                        });
                                                    @endphp
                                                    @if($anggotaOnly->count() > 0)
                                                        <br><small class="text-muted">
                                                            <i class="bi bi-people"></i> Anggota: {{ $anggotaOnly->count() }} orang
                                                        </small>
                                                        @if($totalToolsAnggota > 0)
                                                            <br><small class="text-success">
                                                                <i class="bi bi-tools"></i> Tools Anggota: {{ $totalToolsAnggota }} item
                                                            </small>
                                                        @endif
                                                    @endif
                                                    @if($order->assignedKendaraan)
                                                        <br><small class="text-muted">
                                                            <i class="bi bi-car-front"></i> {{ $order->assignedKendaraan->merk }} {{ $order->assignedKendaraan->type }}
                                                        </small>
                                                    @endif
                                                @elseif($order->assignedTeknisi)
                                                    <strong>{{ $order->assignedTeknisi->name }}</strong>
                                                    @if($order->assignedTeknisi->inventarisTools->where('status', 'in_use')->count() > 0)
                                                        <br><small class="text-success">
                                                            <i class="bi bi-tools"></i> Tools: {{ $order->assignedTeknisi->inventarisTools->where('status', 'in_use')->count() }} item
                                                        </small>
                                                    @else
                                                        <br><small class="text-muted">
                                                            <i class="bi bi-tools"></i> Tidak ada tools
                                                        </small>
                                                    @endif
                                                    @if($order->assignedKendaraan)
                                                        <br><small class="text-muted">
                                                            <i class="bi bi-car-front"></i> {{ $order->assignedKendaraan->merk }} {{ $order->assignedKendaraan->type }}
                                                        </small>
                                                    @endif
                                                @else
                                                    <span class="text-muted">Belum assigned</span>
                                                @endif
                                            </td>
                                            <td>
                                                {!! $order->status_badge !!}
                                            </td>
                                            <td>{!! $order->priority_badge !!}</td>
                                            <td>
                                                @php
                                                    $displayDate = $order->created_at;
                                                    $statusLabel = 'Dibuat';
                                                    
                                                    if ($order->status === 'completed' && $order->completed_at) {
                                                        $displayDate = $order->completed_at;
                                                        $statusLabel = 'Completed';
                                                    } elseif ($order->status === 'in_progress' && $order->started_at) {
                                                        $displayDate = $order->started_at;
                                                        $statusLabel = 'In Progress';
                                                    } elseif ($order->status === 'accepted' && $order->accepted_at) {
                                                        $displayDate = $order->accepted_at;
                                                        $statusLabel = 'Accepted';
                                                    } elseif ($order->status === 'assigned' && $order->assigned_at) {
                                                        $displayDate = $order->assigned_at;
                                                        $statusLabel = 'Assigned';
                                                    }
                                                @endphp
                                                <small class="text-muted">{{ $statusLabel }}</small><br>
                                                {{ $displayDate->format('d M Y H:i') }}
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ route('orders.show', $order->id) }}" class="btn btn-outline-info">
                                                        <i class="bi bi-eye"></i>
                                                    </a>
                                                    @if(in_array($order->status, ['draft', 'assigned']))
                                                        <a href="{{ route('orders.edit', $order->id) }}" class="btn btn-outline-warning">
                                                            <i class="bi bi-pencil"></i>
                                                        </a>
                                                    @endif


                                                    <!-- if role is admin then show delete button -->        
                                                    @if(auth()->user()->role === 'admin')
                                                    <button type="button" class="btn btn-outline-danger" onclick="confirmDeleteOrder({{ $order->id }}, '{{ $order->order_number }}')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination -->
                            <div class="d-flex justify-content-center">
                                {{ $orders->appends(request()->query())->links() }}
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="bi bi-clipboard-x display-1 text-muted"></i>
                                <h4 class="mt-3">Belum ada order</h4>
                                <p class="text-muted">Mulai dengan membuat order baru untuk klien</p>
                                <a href="{{ route('orders.create') }}" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> Buat Order Pertama
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Delete Order Form (Hidden) -->
    <form id="deleteOrderForm" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
@endsection

@push('scripts')
<script>
function confirmDeleteOrder(orderId, orderNumber) {
    if (confirm('Apakah Anda yakin ingin menghapus order "' + orderNumber + '"?\n\nSemua data termasuk gambar-gambar akan dihapus secara permanen!')) {
        const form = document.getElementById('deleteOrderForm');
        form.action = '/admin/orders/' + orderId;
        form.submit();
    }
}

// Handle cascading location filters
document.addEventListener('DOMContentLoaded', function() {
    const provinceFilter = document.getElementById('province_filter');
    const regencyFilter = document.getElementById('regency_filter');
    const districtFilter = document.getElementById('district_filter');
    const villageFilter = document.getElementById('village_filter');
    const filterForm = document.getElementById('filterForm');

    // When province changes
    provinceFilter.addEventListener('change', function() {
        if (this.value) {
            // Enable regency dropdown and submit form to get regencies
            regencyFilter.disabled = false;
            // Clear lower level selections
            regencyFilter.value = '';
            districtFilter.value = '';
            villageFilter.value = '';
            districtFilter.disabled = true;
            villageFilter.disabled = true;
            // Submit form to reload with province filter
            filterForm.submit();
        } else {
            // Disable and clear all lower level dropdowns
            regencyFilter.disabled = true;
            districtFilter.disabled = true;
            villageFilter.disabled = true;
            regencyFilter.value = '';
            districtFilter.value = '';
            villageFilter.value = '';
        }
    });

    // When regency changes
    regencyFilter.addEventListener('change', function() {
        if (this.value) {
            // Enable district dropdown and submit form to get districts
            districtFilter.disabled = false;
            // Clear lower level selections
            districtFilter.value = '';
            villageFilter.value = '';
            villageFilter.disabled = true;
            // Submit form to reload with regency filter
            filterForm.submit();
        } else {
            // Disable and clear lower level dropdowns
            districtFilter.disabled = true;
            villageFilter.disabled = true;
            districtFilter.value = '';
            villageFilter.value = '';
        }
    });

    // When district changes
    districtFilter.addEventListener('change', function() {
        if (this.value) {
            // Enable village dropdown and submit form to get villages
            villageFilter.disabled = false;
            villageFilter.value = '';
            // Submit form to reload with district filter
            filterForm.submit();
        } else {
            // Disable and clear village dropdown
            villageFilter.disabled = true;
            villageFilter.value = '';
        }
    });

    // Handle per page change
    const perPageSelect = document.getElementById('perPageSelect');
    if (perPageSelect) {
        perPageSelect.addEventListener('change', function() {
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', this.value);
            url.searchParams.set('page', '1'); // Reset to first page
            window.location.href = url.toString();
        });
    }
});
</script>
@endpush