@extends('garage.layouts.app')

@section('title', 'Services')

@push('styles')
@include('shared.garage-summary-ui-styles')
@endpush

@section('content')
<div class="container-fluid py-2 px-0">
<div class="grg-sum-shell">

    <div class="grg-sum-head">
        <div>
            <h1 class="grg-sum-title"><i class="bi bi-wrench-adjustable me-1" style="color:var(--bs-primary);"></i>Services</h1>
            <nav class="grg-sum-bc" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('garage.dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
                    <li class="breadcrumb-item active text-muted" aria-current="page">Inventory · Services</li>
                </ol>
            </nav>
            {{-- <p class="grg-sum-hint">Rows: <code>garage_services</code> + <code>garage_id</code> · Category: <code>garage_part_categories</code></p> --}}
        </div>
        <div class="d-flex gap-2">
            <button type="button"
                    class="btn btn-sm fw-semibold px-2 py-1 btn-warning"
                    style="border-radius: 10px;"
                    data-bs-toggle="modal" data-bs-target="#bulkServiceRateUpdateModal">
                <i class="bi bi-currency-exchange me-1"></i>Bulk rate update
            </button>
            <a href="{{ route('garage.services.create') }}"
                class="btn text-white grg-sum-btn"
                style="background:linear-gradient(135deg,var(--bs-primary),var(--garage-primary-700));">
                <i class="bi bi-plus-lg me-1"></i>Add service
            </a>
        </div>
    </div>

    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box" style="background:linear-gradient(135deg,rgba(13,148,136,.08),rgba(13,148,136,.14)); border-color:rgba(13,148,136,.22);">
                <div class="grg-stat-icon" style="background:rgba(13,148,136,.20);"><i class="bi bi-wrench-adjustable" style="color:var(--bs-primary);"></i></div>
                <div><div class="grg-stat-val" style="color:var(--bs-primary);">{{ (int)($stats['total'] ?? 0) }}</div><div class="grg-stat-lbl">Total Services</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#bbf7d0;">
                <div class="grg-stat-icon" style="background:#bbf7d0;"><i class="bi bi-check-circle" style="color:#16a34a;"></i></div>
                <div><div class="grg-stat-val" style="color:#15803d;">{{ (int)($stats['active'] ?? 0) }}</div><div class="grg-stat-lbl">Active</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box" style="background:linear-gradient(135deg,#f8fafc,#f1f5f9); border-color:#e2e8f0;">
                <div class="grg-stat-icon" style="background:#e2e8f0;"><i class="bi bi-dash-circle" style="color:#64748b;"></i></div>
                <div><div class="grg-stat-val" style="color:#374151;">{{ (int)($stats['inactive'] ?? 0) }}</div><div class="grg-stat-lbl">Inactive</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box" style="background:linear-gradient(135deg,#f0fdf9,#d1fae5); border-color:#a7f3d0;">
                <div class="grg-stat-icon" style="background:#a7f3d0;"><i class="bi bi-currency-exchange" style="color:#059669;"></i></div>
                <div><div class="grg-stat-val" style="color:#047857;">PKR {{ number_format((float)($stats['avg_price'] ?? 0), 0) }}</div><div class="grg-stat-lbl">Avg. Price</div></div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body border-bottom">
            <form method="GET" action="{{ route('garage.services.index') }}" class="row g-2 align-items-end">
                <div class="col-md-5">
                    <label class="form-label small text-muted mb-1">Search</label>
                    <div class="position-relative">
                        <i class="bi bi-search position-absolute" style="left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280;"></i>
                        <input type="text" class="form-control form-control-sm ps-5" name="search" placeholder="Service name…" value="{{ $search ?? '' }}">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="all" {{ ($status ?? 'all') === 'all' ? 'selected' : '' }}>All</option>
                        <option value="active" {{ ($status ?? 'all') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ ($status ?? 'all') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-sm btn-outline-primary w-100"><i class="bi bi-funnel me-1"></i>Filter</button>
                    @if(($search ?? '') || ($status ?? 'all') !== 'all')
                        <a href="{{ route('garage.services.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-x-lg"></i></a>
                    @endif
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table class="table table-hover table-sm mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Service</th>
                        <th class="text-end">Time</th>
                        <th class="text-end">Price</th>
                        <th>Status</th>
                        <th style="width: 120px;" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($services as $s)
                        <tr class="js-row-edit-service" data-service-id="{{ (int) $s->id }}">
                            <td>
                                <div class="fw-semibold">{{ $s->name }}</div>
                                @if($s->category)
                                    <div class="small text-muted">{{ $s->category }}</div>
                                @endif
                            </td>
                            <td class="text-end">
                                @if($s->required_minutes !== null && $s->required_minutes !== '')
                                    <span class="badge bg-light text-dark border">{{ (int)$s->required_minutes }} min</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td class="text-end fw-semibold">PKR {{ number_format($s->price ?? 0, 2) }}</td>
                            <td>
                                @if($s->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('garage.services.edit', $s->id) }}"
                                       class="btn btn-outline-primary d-inline-flex align-items-center justify-content-center"
                                       style="width:32px; height:32px;">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST" action="{{ route('garage.services.destroy', $s->id) }}" onsubmit="return confirm('Delete this service?')" class="m-0 d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="btn btn-outline-danger d-inline-flex align-items-center justify-content-center"
                                                style="width:32px; height:32px;">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-5">
                                <div class="mb-2"><i class="bi bi-inbox" style="font-size: 2.5rem;"></i></div>
                                No services found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($services->hasPages())
            <div class="p-3 border-top">{{ $services->links() }}</div>
        @endif
    </div>
</div>
</div>
@endsection

<!-- Bulk Service Rate Update Modal -->
<div class="modal fade" id="bulkServiceRateUpdateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content inv-modal-content">
            <form method="POST" action="{{ route('garage.services.bulk-rate-update') }}" id="bulkServiceRateUpdateForm">
                @csrf
                <div class="modal-header inv-modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="inv-title">Bulk Rate Update</h5>
                        <div class="inv-subtitle">Increase service prices by scope.</div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3 px-3">
                    <div class="mb-2 small text-muted">Choose scope, then apply increase by percent or amount.</div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Apply on</label>
                        <select name="scope" id="bulkServiceScope" class="form-select @error('scope', 'bulkRate') is-invalid @enderror" required>
                            <option value="category" @selected(old('scope', 'category') === 'category')>Category wise</option>
                            <option value="single" @selected(old('scope') === 'single')>Single Service</option>
                            <option value="all" @selected(old('scope') === 'all')>All Services</option>
                        </select>
                        @error('scope', 'bulkRate') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3" id="bulkServiceCategoryWrap">
                        <label class="form-label fw-semibold">Category</label>
                        <select name="category_id" id="bulkServiceCategory" class="form-select @error('category_id', 'bulkRate') is-invalid @enderror">
                            <option value="">Select category</option>
                            @foreach(($categoryOptions ?? []) as $catRow)
                                <option value="{{ (int) $catRow->id }}"
                                        data-count="{{ (int) $catRow->total_services }}"
                                        @selected((string) old('category_id') === (string) $catRow->id)>
                                    {{ $catRow->name }} ({{ (int) $catRow->total_services }} services)
                                </option>
                            @endforeach
                        </select>
                        @error('category_id', 'bulkRate') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3" id="bulkServiceSingleWrap">
                        <label class="form-label fw-semibold">Service</label>
                        <select name="service_id" id="bulkServiceSingle" class="form-select @error('service_id', 'bulkRate') is-invalid @enderror">
                            <option value="">Select service</option>
                            @foreach(($serviceOptions ?? []) as $srv)
                                <option value="{{ (int) $srv->id }}" @selected((string) old('service_id') === (string) $srv->id)>
                                    {{ $srv->name }} (PKR {{ number_format((float)($srv->price ?? 0), 2) }})
                                </option>
                            @endforeach
                        </select>
                        @error('service_id', 'bulkRate') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    <div class="small text-muted mb-2" id="bulkServiceScopeHint">
                        Choose Category wise, Single Service, or apply to all services.
                    </div>

                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Mode</label>
                            <select name="mode" id="bulkServiceMode" class="form-select @error('mode', 'bulkRate') is-invalid @enderror" required>
                                <option value="percent" @selected(old('mode', 'percent') === 'percent')>Increase by %</option>
                                <option value="amount" @selected(old('mode') === 'amount')>Increase by amount</option>
                            </select>
                            @error('mode', 'bulkRate') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Value</label>
                            <input type="number" step="0.01" min="0.01"
                                   name="value" id="bulkServiceValue"
                                   value="{{ old('value') }}"
                                   class="form-control @error('value', 'bulkRate') is-invalid @enderror"
                                   placeholder="e.g. 5 or 250" required>
                            @error('value', 'bulkRate') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="mt-3 alert alert-light border mb-0 py-2 px-3 small">
                        <strong id="bulkServiceCount" data-total="{{ (int)($stats['total'] ?? 0) }}">0</strong> service(s) will be updated.
                    </div>
                </div>
                <div class="modal-footer inv-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check2-circle me-1"></i>Apply update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
@include('shared.parts-modal-styles')
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var modalContext = {!! json_encode(session('services_modal')) !!};
    var modalEl = document.getElementById('bulkServiceRateUpdateModal');
    var form = document.getElementById('bulkServiceRateUpdateForm');
    var scope = document.getElementById('bulkServiceScope');
    var cat = document.getElementById('bulkServiceCategory');
    var single = document.getElementById('bulkServiceSingle');
    var catWrap = document.getElementById('bulkServiceCategoryWrap');
    var singleWrap = document.getElementById('bulkServiceSingleWrap');
    var countEl = document.getElementById('bulkServiceCount');
    var modeEl = document.getElementById('bulkServiceMode');
    var valueEl = document.getElementById('bulkServiceValue');

    var syncChosenState = function (el) {
        if (!el || !window.jQuery) return;
        var $el = window.jQuery(el);
        if ($el.data('chosen')) $el.trigger('chosen:updated');
    };
    var getScope = function () {
        if (window.jQuery && scope) {
            var v = window.jQuery(scope).val();
            if (v) return String(v);
        }
        return scope?.value || 'category';
    };
    var syncUI = function () {
        var s = getScope();
        var isCat = s === 'category';
        var isSingle = s === 'single';
        catWrap?.classList.toggle('d-none', !isCat);
        singleWrap?.classList.toggle('d-none', !isSingle);
        if (cat) cat.required = isCat;
        if (single) single.required = isSingle;
        setTimeout(function () {
            syncChosenState(cat);
            syncChosenState(single);
        }, 0);
    };
    var updateCount = function () {
        if (!countEl) return;
        var s = getScope();
        var c = 0;
        if (s === 'all') {
            c = Number(countEl.dataset.total || 0);
        } else if (s === 'category') {
            var opt = cat?.options?.[cat.selectedIndex];
            c = opt ? Number(opt.dataset.count || 0) : 0;
        } else if (s === 'single') {
            c = single?.value ? 1 : 0;
        }
        countEl.textContent = String(isFinite(c) ? c : 0);
    };

    scope?.addEventListener('change', function () { syncUI(); updateCount(); });
    cat?.addEventListener('change', updateCount);
    single?.addEventListener('change', updateCount);
    if (window.jQuery && scope) {
        window.jQuery(scope).on('change', function () { syncUI(); updateCount(); });
    }

    syncUI();
    updateCount();

    form?.addEventListener('submit', function (event) {
        var s = getScope();
        var count = 0;
        var name = '';
        if (s === 'all') {
            count = Number(countEl?.dataset.total || 0);
            name = 'all services';
        } else if (s === 'category') {
            var opt = cat?.options?.[cat.selectedIndex];
            count = opt ? Number(opt.dataset.count || 0) : 0;
            name = opt ? opt.text : '';
        } else if (s === 'single') {
            count = single?.value ? 1 : 0;
            var opt2 = single?.options?.[single.selectedIndex];
            name = opt2 ? opt2.text : '';
        }
        var modeLabel = modeEl?.value === 'amount' ? 'amount' : 'percent';
        var valueText = valueEl?.value || '0';
        if (!count || !name) {
            event.preventDefault();
            alert('Please select a valid target.');
            return;
        }
        var title = s === 'category' ? 'category "' + name + '"' : (s === 'single' ? 'service "' + name + '"' : 'all services');
        if (!confirm('Apply ' + valueText + ' ' + modeLabel + ' increase to ' + count + ' service(s) for ' + title + '?')) {
            event.preventDefault();
        }
    });

    if (modalContext === 'bulk_rate_update' && modalEl && typeof bootstrap !== 'undefined') {
        bootstrap.Modal.getOrCreateInstance(modalEl).show();
    }

    // Row click => open edit (Services)
    document.querySelectorAll('tr.js-row-edit-service').forEach(function (row) {
        row.addEventListener('click', function (ev) {
            const target = ev.target;
            if (target && target.closest && target.closest('a,button,input,select,textarea,label,.dropdown,.btn-group')) {
                return;
            }
            const editLink = row.querySelector('a[href*="/garage/services/"][href$="/edit"]');
            if (editLink) {
                // Navigate to edit page (services uses separate screen)
                window.location.href = editLink.href;
            }
        });
    });
});
</script>
@endpush