@extends('master')
@section('title')
    Payment
@endsection
@section('content')
<div class="container-fluid pt-4 px-4" style="min-height: 75vh;">

    {{-- Add Collection Modal --}}
<div class="modal fade large-modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pd-20">
                <form id="collectionForm" action="{{ route('payment.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-6">
                            {{-- Tracking ID with live suggestions --}}
                            <div class="form-group position-relative">
                                <label>{{ __('Tracking ID') }}</label>
                                <div class="input-group position-relative">
                                    <input type="text" class="form-control" id="tracking_id" name="tracking_id"
                                           placeholder="Enter Tracking ID" autocomplete="off" required>
                                    <button type="button" id="searchBookingBtn" class="btn btn-primary">
                                        <i class="fa fa-search"></i> Search
                                    </button>
                                    {{-- Suggestion dropdown --}}
                                    <div id="trackingSuggestions"
                                         class="list-group position-absolute w-100"
                                         style="z-index: 1000; top: 100%; display: none;">
                                    </div>
                                </div>
                            </div>

                            {{-- Shipper Name --}}
                            <div class="form-group">
                                <label>{{ __('Shipper Name') }}</label>
                                <input type="text" id="shipper_name" class="form-control" name="shipper_name" readonly>
                            </div>

                            {{-- Collection Amount --}}
                            <div class="form-group">
                                <label>{{ __('Collection Amount') }}</label>
                                <input type="number" id="amount" class="form-control" name="amount" required readonly>
                                <input type="hidden" id="booking_id" name="booking_id">
                            </div>
                        </div>

                        <!-- Right Column -->
                        <div class="col-md-6">

 {{-- Booking Date --}}
                            <div class="form-group">
                                <label>{{ __('Booking Date') }}</label>
                                <input type="text" id="booking_date" name="booking_date" class="form-control" readonly>
                            </div>

                               <div class="form-group">
                                <label>{{ __('Compnay Name') }}</label>
                                <input type="text" id="company_id" name="company_name" class="form-control" readonly>
                            </div>
                           {{-- Payment Amount --}}
                            <div class="form-group">
                                <label>{{ __('Payment Amount') }}</label> 
                                <input type="text" class="form-control" name="payment_amount" placeholder="Enter Payment Amount">
                            </div>
                            
                            {{-- Hidden payment date --}}
                            <input type="hidden" name="payment_date" value="{{ date('Y-m-d') }}">
                        </div>
                    </div>
            </div><!-- modal-body -->

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary submit">Submit</button>
            </div>
                </form>
        </div>
    </div>
</div>

    {{-- Success/Error Alerts --}}
    <div class="row g-4">
        @if (Session::has('success'))
            <div class="col-lg-5">
                <div class="alert alert-success" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <i class="fa fa-check-circle-o mr-2" aria-hidden="true"></i> {{ Session::get('success') }}
                </div>
            </div>
        @elseif (Session::has('danger'))
            <div class="col-lg-5">
                <div class="alert alert-danger" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <i class="fa fa-check-circle-o mr-2" aria-hidden="true"></i> {{ Session::get('danger') }}
                </div>
            </div>
        @endif

        {{-- Collection Table --}}
        <div class="col-12">
            <div class="bg-light rounded h-100 p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6>Payment List</h6>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                        data-bs-target="#exampleModal">
                        Add Payment
                    </button>
                </div>

                <div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered" style="width:100%;">
                        <thead>
                            <tr>
                                <th>Tracking ID</th>
                                <th>Booking Date</th>
                                <th>Payment Date</th>
                                <th>Collection Amount</th>
                                <th>Payment Amounts </th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($collections as $item)
                                <tr>
                                    <td>{{ $item->tracking_id }}</td>
                                  
                                    <td>{{ $item->date }}</td>
                                    <td>{{ $item->payment_date }}</td>
                                      <td>{{ $item->amount }}</td>
                                    <td>{{ $item->payment_amount }}</td>
                                    <td style="text-align: center;">
                                        <a href="{{ route('payment.print', $item->id) }}" class="btn btn-primary">
                                            <i class="fas fa-print"></i> 
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Scripts --}}
<script>
let trackingInput = document.getElementById('tracking_id');
let suggestionsBox = document.getElementById('trackingSuggestions');

// Live tracking ID suggestions
trackingInput.addEventListener('input', function () {
    let query = this.value.trim();
    if (query.length < 1) {
        suggestionsBox.style.display = 'none';
        return;
    }

    fetch(`{{ route('collection.searchTracking') }}?term=${encodeURIComponent(query)}`)
        .then(res => res.json())
        .then(data => {
            suggestionsBox.innerHTML = '';
            if (data.length > 0) {
                data.forEach(item => {
                    let div = document.createElement('div');
                    div.classList.add('list-group-item', 'list-group-item-action');
                    div.textContent = item;
                    div.addEventListener('click', function () {
                        trackingInput.value = item;
                        suggestionsBox.style.display = 'none';
                    });
                    suggestionsBox.appendChild(div);
                });
                suggestionsBox.style.display = 'block';
            } else {
                suggestionsBox.style.display = 'none';
            }
        });
});

// Hide suggestions on outside click
document.addEventListener('click', function (e) {
    if (!trackingInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
        suggestionsBox.style.display = 'none';
    }
});

// Search button click
document.getElementById('searchBookingBtn').addEventListener('click', function() {
    let trackingId = document.getElementById('tracking_id').value;
    if (!trackingId.trim()) {
        alert('Please enter a Tracking ID');
        return;
    }

    fetch("{{ route('collection.search') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({ tracking_id: trackingId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('booking_date').value = data.booking.date;
            document.getElementById('amount').value = data.booking.price;
            document.getElementById('booking_id').value = data.booking.id;
            document.getElementById('shipper_name').value = data.booking.shipper;
          if (data.booking.company_id) {
    $.ajax({
        type: 'GET',
        url: '/api/companies/' + data.booking.company_id,
        success: function(response) {
            document.getElementById('company_id').value = response.name;
        }
    });
} else {
    document.getElementById('company_id').value = 'No Company Added';
}
             // Set shipper name
        } else {
            alert('Booking not found!');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Something went wrong. Please try again.');
    });
});
</script>
@endsection