@extends('layouts.app')
@section('title', 'লাইভ ট্র্যাকিং')
@section('page-title', 'লাইভ সিলিন্ডার ট্র্যাকিং')

@section('content')

<div class="d-flex gap-2 mb-4 flex-wrap">
    <a href="{{ route('admin.cylinders.stock') }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-bar-chart me-1"></i>স্টক সারসংক্ষেপ
    </a>
    <a href="{{ route('admin.cylinders.tracking') }}" class="btn btn-info btn-sm text-white">
        <i class="bi bi-geo-alt me-1"></i>লাইভ ট্র্যাকিং
    </a>
    <a href="{{ route('admin.cylinders.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-list me-1"></i>সব সিলিন্ডার
    </a>
</div>

{{-- Filters --}}
<div class="card stat-card mb-4">
    <div class="card-body">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label small fw-semibold">সিলিন্ডার টাইপ</label>
                <select name="type" class="form-select form-select-sm">
                    <option value="">সব টাইপ</option>
                    @foreach($types as $t)
                        <option value="{{ $t->id }}" {{ request('type') == $t->id ? 'selected' : '' }}>{{ $t->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold">কার কাছে</label>
                <select name="holder_type" class="form-select form-select-sm">
                    <option value="">সবার কাছে</option>
                    <option value="customer" {{ request('holder_type') === 'customer' ? 'selected' : '' }}>গ্রাহকের কাছে</option>
                    <option value="delivery_boy" {{ request('holder_type') === 'delivery_boy' ? 'selected' : '' }}>ডেলিভারি বয়ের কাছে</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100">
                    <i class="bi bi-search me-1"></i>ফিল্টার
                </button>
            </div>
            <div class="col-md-2">
                <a href="{{ route('admin.cylinders.tracking') }}" class="btn btn-outline-secondary btn-sm w-100">
                    <i class="bi bi-x me-1"></i>রিসেট
                </a>
            </div>
        </form>
    </div>
</div>

{{-- Summary --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card stat-card border-start border-4 border-info">
            <div class="card-body d-flex align-items-center gap-3">
                <i class="bi bi-person-check-fill text-info fs-2"></i>
                <div>
                    <div class="text-muted small">গ্রাহকের কাছে</div>
                    <div class="fs-3 fw-bold">{{ $cylinders->where('holder_type', 'customer')->count() }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card border-start border-4 border-warning">
            <div class="card-body d-flex align-items-center gap-3">
                <i class="bi bi-bicycle text-warning fs-2"></i>
                <div>
                    <div class="text-muted small">ডেলিভারি বয়ের কাছে</div>
                    <div class="fs-3 fw-bold">{{ $cylinders->where('holder_type', 'delivery_boy')->count() }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card border-start border-4 border-primary">
            <div class="card-body d-flex align-items-center gap-3">
                <i class="bi bi-fire text-primary fs-2"></i>
                <div>
                    <div class="text-muted small">মোট বাইরে</div>
                    <div class="fs-3 fw-bold">{{ $cylinders->count() }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Tracking Table --}}
<div class="card stat-card">
    <div class="card-header bg-white border-0 pt-3">
        <h6 class="fw-semibold mb-0"><i class="bi bi-pin-map text-info me-2"></i>সিলিন্ডারের অবস্থান</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th>সিলিন্ডার</th>
                        <th>টাইপ</th>
                        <th>স্ট্যাটাস</th>
                        <th>কার কাছে</th>
                        <th>ধারক</th>
                        <th>একশন</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cylinders as $cylinder)
                    <tr>
                        <td>
                            <a href="{{ route('admin.cylinders.show', $cylinder) }}" class="fw-semibold text-decoration-none">
                                #{{ $cylinder->id }}
                            </a>
                            @if($cylinder->serial_number)
                                <br><small class="text-muted">{{ $cylinder->serial_number }}</small>
                            @endif
                        </td>
                        <td>{{ $cylinder->cylinderType->name }}</td>
                        <td>
                            <span class="badge bg-{{ $cylinder->status_color }}">{{ $cylinder->status_label }}</span>
                        </td>
                        <td>
                            @if($cylinder->holder_type === 'customer')
                                <span class="badge bg-info rounded-pill">গ্রাহক</span>
                            @else
                                <span class="badge bg-warning rounded-pill text-dark">ডেলিভারি বয়</span>
                            @endif
                        </td>
                        <td class="fw-semibold">{{ $cylinder->holder_name }}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-success"
                                data-bs-toggle="modal" data-bs-target="#moveModal"
                                data-cylinder-id="{{ $cylinder->id }}"
                                data-cylinder-label="#{{ $cylinder->id }} {{ $cylinder->cylinderType->name }}">
                                <i class="bi bi-arrow-left-right"></i> মুভ
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted py-5">
                            <i class="bi bi-check-circle fs-1 d-block mb-2 text-success opacity-50"></i>
                            সব সিলিন্ডার গুদামে আছে।
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Move Modal --}}
<div class="modal fade" id="moveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="moveForm">
                @csrf
                <div class="modal-header">
                    <h6 class="modal-title fw-semibold">সিলিন্ডার মুভ করুন</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-3" id="cylinderLabel"></p>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">মুভমেন্ট টাইপ</label>
                        <select name="movement_type" class="form-select" id="movType" required>
                            <option value="returned">ফেরত নিন (গুদামে)</option>
                            <option value="transferred">অন্যত্র ট্রান্সফার</option>
                            <option value="refilled">রিফিল হয়েছে</option>
                            <option value="damaged">ক্ষতিগ্রস্ত চিহ্নিত করুন</option>
                        </select>
                    </div>
                    <div id="toFields" style="display:none">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">পাঠানো হচ্ছে</label>
                            <select name="to_type" class="form-select" id="toType">
                                <option value="customer">গ্রাহকের কাছে</option>
                                <option value="delivery_boy">ডেলিভারি বয়ের কাছে</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">কার কাছে?</label>
                            <select name="to_id" class="form-select" id="toIdCustomer">
                                <option value="">-- গ্রাহক বেছে নিন --</option>
                                @foreach($customers as $c)
                                    <option value="{{ $c->id }}">{{ $c->name }} ({{ $c->phone }})</option>
                                @endforeach
                            </select>
                            <select name="to_id" class="form-select mt-2" id="toIdDelivery" style="display:none">
                                <option value="">-- ডেলিভারি বয় বেছে নিন --</option>
                                @foreach($deliveryBoys as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">নোট (ঐচ্ছিক)</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বাতিল</button>
                    <button type="submit" class="btn btn-primary">সংরক্ষণ</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const moveModal = document.getElementById('moveModal');
moveModal.addEventListener('show.bs.modal', function(e) {
    const btn = e.relatedTarget;
    const id = btn.dataset.cylinderId;
    document.getElementById('moveForm').action = `/admin/cylinders/${id}/move`;
    document.getElementById('cylinderLabel').textContent = 'সিলিন্ডার: ' + btn.dataset.cylinderLabel;
});

const movType = document.getElementById('movType');
const toFields = document.getElementById('toFields');
const toType = document.getElementById('toType');
const toIdCustomer = document.getElementById('toIdCustomer');
const toIdDelivery = document.getElementById('toIdDelivery');

movType.addEventListener('change', function() {
    toFields.style.display = this.value === 'transferred' ? 'block' : 'none';
});

toType.addEventListener('change', function() {
    toIdCustomer.style.display = this.value === 'customer' ? 'block' : 'none';
    toIdDelivery.style.display = this.value === 'delivery_boy' ? 'block' : 'none';
    toIdCustomer.name = this.value === 'customer' ? 'to_id' : '';
    toIdDelivery.name = this.value === 'delivery_boy' ? 'to_id' : '';
});
</script>
@endpush