@extends('layouts.admin')
@section('title', 'Data Dumping')
@section('page_title', 'Data Dumping')
@section('breadcrumb')
    <li class="active">Dumping</li>
@endsection
@section('content')

<style>
    .filter-input {
        font-size: 14px !important;
        padding: 8px 12px !important;
        height: auto !important;
        border-radius: 6px !important;
    }
    .filter-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        color: #5a6c7d !important;
    }
    .badge-link {
        font-size: 11px;
        padding: 4px 8px;
    }
</style>

<div class="row">
    <div class="col-md-12 m-b-3">
        <a href="{{ route('admin.hauling.create') }}" class="btn btn-success">
            <i class="fa fa-plus"></i> Input Dumping Baru
        </a>
    </div>
</div>

{{-- ============================================================
     FILTER CARD
     ============================================================ --}}
<div class="row mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fa fa-filter"></i> Filter Data Dumping</h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('admin.hauling.index') }}" id="filter_form">
                    <div class="row align-items-end">
                        <div class="col-md-3">
                            <label class="filter-label">Nomor Struk Hauling</label>
                            <input type="text"
                                   name="hauling_number"
                                   class="form-control filter-input"
                                   value="{{ request('hauling_number') }}"
                                   placeholder="Contoh: HL-20260901-001">
                        </div>
                        <div class="col-md-2">
                            <label class="filter-label">Tanggal</label>
                            <input type="date"
                                   name="tanggal"
                                   class="form-control filter-input"
                                   value="{{ request('tanggal') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="filter-label">Nomor Kendaraan</label>
                            <input type="text"
                                   name="vehicle_id"
                                   class="form-control filter-input"
                                   value="{{ request('vehicle_id') }}"
                                   placeholder="Contoh: PSHD005">
                        </div>
                        <div class="col-md-3">
                            <label class="filter-label">Nama Supir</label>
                            <input type="text"
                                   name="driver"
                                   class="form-control filter-input"
                                   value="{{ request('driver') }}"
                                   placeholder="Nama supir...">
                        </div>
                        <div class="col-md-1">
                            <button type="submit" class="btn btn-primary filter-input w-100">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                    @if(request()->hasAny(['hauling_number', 'tanggal', 'vehicle_id', 'driver']))
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <a href="{{ route('admin.hauling.index') }}" class="btn btn-secondary btn-sm">
                                    <i class="fa fa-times"></i> Reset Filter
                                </a>
                            </div>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     DATA TABLE
     ============================================================ --}}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Data Dumping</h5>
                <span class="badge badge-secondary">{{ $haulings->total() }} data</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="text-center" style="width:40px">#</th>
                                <th>Nomor Struk</th>
                                <th>Tanggal</th>
                                <th>Jam</th>
                                <th>Supir</th>
                                <th>Nomor Kendaraan</th>
                                <th>Lokasi Muat</th>
                                <th class="text-right">Net Weight (ton)</th>
                                {{-- <th class="text-center">Status</th> --}}
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($haulings as $index => $h)
                            <tr>
                                <td class="text-center text-muted">
                                    {{ $haulings->firstItem() + $index }}
                                </td>
                                <td>
                                    <code class="text-dark" style="font-size:13px">{{ $h->hauling_number ?: $h->hauling_recapnum ?: '—' }}</code>
                                </td>
                                <td>
                                    <div>{{ $h->hauling_date?->format('d-m-Y') }}</div>

                                </td>
                                <td>
                                    <div>{{ $h->hauling_out_time ?: '—' }}</div>
                                <td>
                                    @if($h->checkout?->supir)
                                        <span class="text-dark">{{ $h->checkout->supir->nama_supir }}</span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($h->vehicle_number)
                                        <span class="text-dark">{{ $h->vehicle_number }}</span>
                                    @elseif($h->vehicle_id && $h->vehicle_id !== 'N/A')
                                        <span class="text-muted">{{ $h->vehicle_id }}</span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($h->lokasi_muat)
                                        <span class="badge badge-info">{{ $h->lokasi_muat }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    <strong>{{ number_format($h->net_weight, 2, ',', '.') }}</strong>
                                </td>
                                {{-- <td class="text-center">
                                    @if($h->id_checkout)
                                        <span class="badge badge-success badge-link">
                                            <i class="fa fa-check-circle"></i> Done {{ $h->id_checkout }}
                                            <i class="fa fa-check-circle"></i> Done
                                        </span>
                                    @elseif($h->scanned_at)
                                        <span class="badge badge-warning badge-link">Belum di-link</span>
                                    @else
                                        <span class="badge badge-secondary badge-link">Belum sync</span>
                                    @endif
                                </td> --}}
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm">
                                        <button type="button"
                                                class="btn btn-outline-info"
                                                title="Detail"
                                                onclick="showDetail({{ $h->id_hauling }})">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        @if(!$h->id_checkout)
                                            <button type="button"
                                                    class="btn btn-outline-warning"
                                                    title="Link Checkout"
                                                    onclick="showLinkModal({{ $h->id_hauling }}, '{{ $h->hauling_number ?: $h->hauling_recapnum }}')">
                                                <i class="fa fa-link"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted py-4">
                                    <i class="fa fa-inbox fa-2x mb-2"></i><br>
                                    @if(request()->hasAny(['hauling_number', 'tanggal', 'vehicle_id', 'driver']))
                                        Tidak ada data yang cocok dengan filter.
                                    @else
                                        Belum ada data dumping.
                                    @endif
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($haulings->hasPages())
                    <div class="card-footer">
                        {{ $haulings->withQueryString()->links('pagination::bootstrap-4') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     MODAL: DETAIL
     ============================================================ --}}
<div class="modal fade" id="modalDetail" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-truck"></i> Detail Dumping</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="modalDetailBody">
                <div class="text-center text-muted p-4">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================
     MODAL: LINK CHECKOUT
     ============================================================ --}}
<div class="modal fade" id="modalLink" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-link"></i> Link ke Checkout</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form method="POST" id="formLinkCheckout">
                @csrf
                <div class="modal-body">
                    <p>Hauling: <strong id="linkHaulingNumber"></strong></p>
                    <div class="form-group">
                        <label>ID Checkout</label>
                        <input type="number"
                               name="id_checkout"
                               id="linkCheckoutId"
                               class="form-control"
                               placeholder="Masukkan ID checkout..."
                               required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-link"></i> Link Sekarang
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function showDetail(id) {
    $('#modalDetailBody').html('<div class="text-center text-muted p-4"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
    $('#modalDetail').modal('show');
    $.get('{{ route('admin.hauling.index') }}/' + id, function(data) {
        var h = data;
        var html = '<div class="row">';
        html += '<div class="col-md-6">';
        html += '<table class="table table-sm table-borderless">';
        html += '<tr><td class="text-muted" style="width:140px">Nomor Struk</td><td><code>' + (h.hauling_number || '—') + '</code></td></tr>';
        html += '<tr><td class="text-muted">Tanggal Dumping</td><td>' + (h.hauling_date || '—') + ' ' + (h.hauling_time || '') + '</td></tr>';
        html += '<tr><td class="text-muted">Tanggal Muat</td><td>' + (h.hauling_out_date || '—') + ' ' + (h.hauling_out_time || '') + '</td></tr>';
        html += '<tr><td class="text-muted">Lokasi Muat</td><td>' + (h.lokasi_muat ? '<span class="badge badge-info">' + h.lokasi_muat + '</span>' : '—') + '</td></tr>';
        html += '<tr><td class="text-muted">Driver Card</td><td>' + (h.driver_card || '—') + '</td></tr>';
        html += '</table></div>';
        html += '<div class="col-md-6">';
        html += '<table class="table table-sm table-borderless">';
        html += '<tr><td class="text-muted" style="width:140px">Kendaraan</td><td>' + (h.vehicle_number || h.vehicle_id || '—') + '</td></tr>';
        html += '<tr><td class="text-muted">Net Weight</td><td><strong>' + (h.net_weight || '—') + ' ton</strong></td></tr>';
        html += '<tr><td class="text-muted">Gross Weight</td><td>' + (h.gross_weight || '0') + '</td></tr>';
        html += '<tr><td class="text-muted">Tare Weight</td><td>' + (h.tare_weight || '0') + '</td></tr>';
        html += '<tr><td class="text-muted">Checkout</td><td>' + (h.id_checkout ? '<span class="badge badge-success">#' + h.id_checkout + (h.checkout && h.checkout.supir ? ' - ' + h.checkout.supir : '') + '</span>' : '<span class="badge badge-warning">Belum di-link</span>') + '</td></tr>';
        html += '<tr><td class="text-muted">Scanned By</td><td>' + (h.scanned_by || '—') + (h.scanned_at ? '<br><small class="text-muted">' + h.scanned_at + '</small>' : '') + '</td></tr>';
        html += '</table></div></div>';
        $('#modalDetailBody').html(html);
    }).fail(function() {
        $('#modalDetailBody').html('<p class="text-center text-danger p-4">Gagal memuat data.</p>');
    });
}

function showLinkModal(id, haulingNumber) {
    $('#linkHaulingNumber').text(haulingNumber || 'Hauling #' + id);
    $('#linkCheckoutId').val('');
    $('#formLinkCheckout').attr('action', '{{ route('admin.hauling.index') }}/' + id + '/link');
    $('#modalLink').modal('show');
}

$('#formLinkCheckout').on('submit', function(e) {
    e.preventDefault();
    var action = $(this).attr('action');
    var data = $(this).serialize();
    $.post(action, data, function(response) {
        $('#modalLink').modal('hide');
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: 'Hauling berhasil di-link ke checkout.',
            confirmButtonText: 'OK',
            confirmButtonColor: '#28a745'
        }).then(function() {
            location.reload();
        });
    }).fail(function(xhr) {
        var msg = 'Gagal link checkout.';
        if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
        Swal.fire({ icon: 'error', title: 'Gagal', text: msg, confirmButtonText: 'OK', confirmButtonColor: '#dc3545' });
    });
});

// Reset filter
$('#btn_reset_filter').on('click', function() {
    window.location.href = '{{ route('admin.hauling.index') }}';
});
</script>
@endpush