@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush

<!-- Create Trip Modal -->
<div class="modal fade" id="createTripModal" tabindex="-1" aria-labelledby="createTripModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('trips.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title" id="createTripModalLabel">
                        <i class="fa fa-plus me-1"></i> Create Delivery Trip
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body row g-3">
                    <div class="col-md-6">
                        <label for="car_id" class="form-label">Select Car</label>
                        <select name="car_id" id="car_id" class="form-select" required>
                            <option value="">-- Choose Car --</option>
                            @foreach($cars as $car)
                                <option value="{{ $car->id }}">
                                    {{ $car->registration_alphabet }}-{{ $car->registration_number }} ({{ $car->car_model }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label for="trip_date" class="form-label">Trip Date & Time</label>
                        <input type="datetime-local" class="form-control" name="trip_date" id="trip_date" required>
                    </div>


                    <div class="col-md-6">
                        <label for="trip_cost" class="form-label">Trip Cost</label>
                        <input type="number" step="0.01" class="form-control" name="trip_cost" id="trip_cost" required>
                    </div>

                    <div class="col-md-12">
                        <label for="remarks" class="form-label">Remarks</label>
                        <textarea class="form-control" name="remarks" id="remarks" rows="3"></textarea>
                    </div>
                </div>

                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save me-1"></i> Save Trip
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Edit Trip Modal -->
<div class="modal fade" id="editTripModal" tabindex="-1" aria-labelledby="editTripModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form method="POST" id="editTripForm">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title" id="editTripModalLabel">
                        <i class="fa fa-edit me-1"></i> Edit Trip
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body row g-3">
                    <input type="hidden" name="trip_id" id="edit_trip_id">

                    <div class="col-md-6">
                        <label for="edit_car_id" class="form-label">Select Car</label>
                        <select name="car_id" id="edit_car_id" class="form-select" required>
                            <option value="">-- Choose Car --</option>
                            @foreach($cars as $car)
                                <option value="{{ $car->id }}">
                                    {{ $car->registration_alphabet }}-{{ $car->registration_number }} ({{ $car->car_model }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label for="edit_trip_date" class="form-label">Trip Date & Time</label>
                        <input type="datetime-local" class="form-control" name="trip_date" id="edit_trip_date" required>
                    </div>

                    <div class="col-md-6">
                        <label for="edit_trip_cost" class="form-label">Trip Cost</label>
                        <input type="number" step="0.01" class="form-control" name="trip_cost" id="edit_trip_cost" required>
                    </div>

                    <div class="col-md-12">
                        <label for="edit_remarks" class="form-label">Remarks</label>
                        <textarea class="form-control" name="remarks" id="edit_remarks" rows="3"></textarea>
                    </div>
                </div>

                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fa fa-save me-1"></i> Update Trip
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Delete Trip Modal -->
<div class="modal fade" id="deleteTripModal" tabindex="-1" aria-labelledby="deleteTripModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" id="deleteTripForm">
            @csrf
            @method('DELETE')
            <div class="modal-content">
                <div class="modal-header  text-white">
                    <h5 class="modal-title" id="deleteTripModalLabel">
                        <i class="fa fa-trash me-1"></i> Confirm Trip Deletion
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <p>Are you sure you want to delete this trip?</p>
                    <input type="hidden" name="trip_id" id="delete_trip_id">
                </div>

                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fa fa-trash me-1"></i> Delete Trip
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid p-0">
            <h1 class="h3 mb-3">Sand Trips</h1>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="card border-left-primary shadow-sm">
                                    <div class="card-body">
                                        <h6 class="text-muted">Total Trips</h6>
                                        <h4 class="mb-0">{{ number_format($totalTrips) }}</h4>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card border-left-success shadow-sm">
                                    <div class="card-body">
                                        <h6 class="text-muted">Total Trip Cost</h6>
                                        <h4 class="mb-0">Tsh{{ number_format($totalCost, 2) }}</h4>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card border-left-info shadow-sm">
                                    <div class="card-body">
                                        <h6 class="text-muted">Total Cubic Meter(s) | m³</h6>
                                        <h4 class="mb-0">{{ number_format($totalCubicMeters, 2) }}</h4>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Trips List</h5>
                        <a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#createTripModal">
                            <i class="fa fa-plus me-1"></i> Create Trip
                        </a>
                    </div>

                    <div class="card-body">
                        <table class="table table-bordered table-striped yajra-datatable" id="sand-trips-table" style="width:100%">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Car</th>
                                    <th>Trip Date</th>
                                    <th>Trip Cost</th>
                                    <th>Registered By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Placeholder for Create Trip Modal -->
{{-- @include('sand_trips.partials.create-modal') --}}
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(function () {
        $('#sand-trips-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route('trips.index') }}',
            dom: "<'row mb-3'<'col-sm-6'l><'col-sm-6'f>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row mt-3'<'col-sm-5'i><'col-sm-7'p>>",
            columns: [
                { data: 'id', name: 'id' },
                { data: 'registration', name: 'registration' },
                { data: 'trip_date', name: 'trip_date' },
                { data: 'trip_cost', name: 'trip_cost' },
                { data: 'registered_by', name: 'registered_by' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    });
</script>

<script>
    $(document).on('click', '.editTripBtn', function () {
        const tripId = $(this).data('id');

        $('#editTripForm').attr('action', `/trips/${tripId}`);
        $('#edit_trip_id').val(tripId);
        $('#edit_car_id').val($(this).data('car_id'));
        $('#edit_trip_date').val($(this).data('trip_date'));
        $('#edit_trip_cost').val($(this).data('trip_cost'));
        $('#edit_remarks').val($(this).data('remarks'));

        $('#editTripModal').modal('show');
    });

    $(document).on('click', '.deleteTripBtn', function () {
        const tripId = $(this).data('id');
        $('#deleteTripForm').attr('action', `/trips/${tripId}`);
        $('#delete_trip_id').val(tripId);
        $('#deleteTripModal').modal('show');
    });
</script>

@endpush