@extends('garage.layouts.app')

@section('title', 'Add Service')

@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-plus-circle me-1" style="color:var(--bs-primary);"></i>Add Service</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"><a href="{{ route('garage.services.index') }}" class="text-decoration-none text-muted">Inventory · Services</a></li>
                    <li class="breadcrumb-item active text-muted" aria-current="page">Add</li>
                </ol>
            </nav>
            <p class="grg-sum-hint">These services will be selectable in {{ $glOrders ?? 'Orders' }} and Counter Sale.</p>
        </div>
        <a href="{{ route('garage.services.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <form method="POST" action="{{ route('garage.services.store') }}" class="row g-3" id="garageServiceForm">
                @csrf

                <div class="col-md-6">
                    <label class="form-label">Service category</label>
                    <select name="garage_part_category_id" class="form-select">
                        <option value="">— Select —</option>
                        @foreach(($categories ?? []) as $c)
                            <option value="{{ $c->id }}" {{ (string)old('garage_part_category_id') === (string)$c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                    <div class="form-text">This category is used for filtering services in Quick add.</div>
                    @error('garage_part_category_id') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-8">
                    <label class="form-label">Service name</label>
                    <input type="text" name="name" value="{{ old('name') }}" class="form-control" required placeholder="e.g. AC Gas Refill">
                    @error('name') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label">Service price</label>
                    <div class="input-group">
                        <span class="input-group-text">PKR</span>
                        <input type="number" step="0.01" min="0" name="price" value="{{ old('price', 0) }}" class="form-control" required>
                    </div>
                    @error('price') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label">Required time</label>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label small text-muted mb-1">Hours</label>
                            <select class="form-select" id="required_time_hours">
                                @for($h=0;$h<=12;$h++)
                                    <option value="{{ $h }}">{{ $h }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label small text-muted mb-1">Minutes</label>
                            <select class="form-select" id="required_time_minutes">
                                @for($m=0;$m<=55;$m+=5)
                                    <option value="{{ $m }}">{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    <input type="hidden" name="required_minutes" id="required_minutes" value="{{ old('required_minutes') }}">
                    <div class="d-flex flex-wrap gap-2 mt-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary js-req-time" data-min="30">30 min</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary js-req-time" data-min="45">45 min</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary js-req-time" data-min="60">1 hour</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary js-req-time" data-min="80">1h 20m</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary js-req-time" data-min="90">1h 30m</button>
                    </div>
                    <div class="form-text">Choose hours + minutes. Saved as total minutes.</div>
                    @error('required_minutes') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label">Sort order</label>
                    <input type="number" min="0" name="sort_order" value="{{ old('sort_order', 0) }}" class="form-control">
                    @error('sort_order') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-6 d-flex align-items-end">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" {{ old('is_active', '1') ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_active">Active</label>
                    </div>
                </div>

                <div class="col-12 d-flex gap-2">
                    <button type="submit" class="btn text-white" style="background:linear-gradient(135deg,var(--bs-primary),var(--garage-primary-700));">
                        <i class="bi bi-check2-circle me-1"></i>Save service
                    </button>
                    <a href="{{ route('garage.services.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var hid = document.getElementById('required_minutes');
    var hoursSel = document.getElementById('required_time_hours');
    var minsSel = document.getElementById('required_time_minutes');
    var form = document.getElementById('garageServiceForm');

    function syncFromHidden() {
        var v = parseInt((hid && hid.value) ? hid.value : '0', 10) || 0;
        var h = Math.floor(v / 60);
        var m = v % 60;
        if (h < 0) h = 0;
        if (m < 0) m = 0;
        // snap minutes to 5-min increments for UI
        m = Math.round(m / 5) * 5;
        if (m >= 60) { m = 0; h += 1; }
        if (hoursSel) hoursSel.value = String(Math.max(0, Math.min(12, h)));
        if (minsSel) minsSel.value = String(Math.max(0, Math.min(55, m)));
    }

    function syncToHidden() {
        if (!hid) return;
        var h = parseInt(hoursSel && hoursSel.value ? hoursSel.value : '0', 10);
        var m = parseInt(minsSel && minsSel.value ? minsSel.value : '0', 10);
        if (isNaN(h) || h < 0) h = 0;
        if (isNaN(m) || m < 0) m = 0;
        hid.value = String((h * 60) + m);
    }

    syncFromHidden();
    syncToHidden();
    if (hoursSel) hoursSel.addEventListener('change', syncToHidden);
    if (minsSel) minsSel.addEventListener('change', syncToHidden);
    if (form) {
        form.addEventListener('submit', function () {
            syncToHidden();
        });
    }

    document.querySelectorAll('.js-req-time').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var v = parseInt(String(btn.getAttribute('data-min') || '0'), 10) || 0;
            if (v < 0) v = 0;
            var h = Math.floor(v / 60);
            var m = v % 60;
            // snap m to nearest 5
            m = Math.round(m / 5) * 5;
            if (m >= 60) { m = 0; h += 1; }
            if (hoursSel) hoursSel.value = String(Math.max(0, Math.min(12, h)));
            if (minsSel) minsSel.value = String(Math.max(0, Math.min(55, m)));
            syncToHidden();
        });
    });
});
</script>
@endpush