@extends('layouts.admin-dash')

@section('title', 'Edit Parcel')

@section('content')

    <div class="card">

        <div class="card-header bg-primary">
            <h4 class="text-white">Edit Parcel</h4>
        </div>

        <div class="card-body">

            <form action="{{ url('admin/parcel/' . $parcel->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <h5 class="mb-3">Package Information</h5>

                <table class="table table-bordered" id="packageTable">

                    <thead>
                        <tr>
                            <th>Qty</th>
                            <th>Type</th>
                            <th>Width</th>
                            <th>Height</th>
                            <th>Weight</th>
                            <th>Length</th>
                            <th>Description</th>
                            <th>Price</th>
                            <th>Image</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach($packages as $index => $pkg)

                            <tr>

                                <td>
                                    <input type="number" style="width:60px;" name="quantity[]" value="{{ $pkg->quantity }}"
                                        class="form-control">
                                </td>

                                <td>
                                    <select name="type[]" class="form-control">
                                        <option selected>{{ $pkg->type }}</option>
                                        <option>Pallet</option>
                                        <option>Carton</option>
                                        <option>Crate</option>
                                        <option>Loose</option>
                                        <option>Others</option>
                                    </select>
                                </td>

                                <td>
                                    <input type="number" name="width[]" value="{{ $pkg->width }}" class="form-control">
                                </td>

                                <td>
                                    <input type="number" name="height[]" value="{{ $pkg->height }}" class="form-control">
                                </td>

                                <td>
                                    <input type="number" name="weight[]" value="{{ $pkg->weight }}" class="form-control">
                                </td>

                                <td>
                                    <input type="number" name="length[]" value="{{ $pkg->length }}" class="form-control">
                                </td>

                                <td>
                                    <textarea name="description[]" class="form-control">{{ $pkg->description }}</textarea>
                                </td>

                                <td>
                                    <input type="number" step="0.01" name="price[]" value="{{ $pkg->price }}"
                                        class="form-control price">
                                </td>

                                <td>

                                    @if($pkg->image)
                                        <img src="{{ asset($pkg->image) }}" width="40"><br>

                                        <input type="hidden" name="old_image[]" value="{{ $pkg->image }}">
                                    @endif

                                    <input type="file" name="image[]" class="form-control">

                                </td>

                                <td>
                                    <button type="button" class="btn btn-success addRow">+</button>
                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>


                <div class="row mb-4">
                    <div class="col-md-4">

                        <label>Total Price</label>

                        <input type="text" id="total_price_display" value="{{ $parcel->total_price }}"
                            class="form-control bg-light" readonly>

                        <input type="hidden" name="total_price" value="{{ $parcel->total_price }}" id="total_price">

                    </div>
                </div>


                <hr>


                <h5>Sender Information</h5>

                <label class="form-label">Sender Name</label>
                <input type="text" name="sender_name" value="{{ $parcel->sender_name }}" class="form-control mb-2">

                <label class="form-label">Sender Address</label>
                <input type="text" name="sender_address" value="{{ $parcel->sender_address }}" class="form-control mb-2">

                <label class="form-label">Sender Email</label>
                <input type="text" name="sender_contact" value="{{ $parcel->sender_contact }}" class="form-control mb-2">

                <label class="form-label">Sender Phone Number</label>
                <input type="text" name="sender_phone" value="{{ $parcel->sender_phone }}" class="form-control mb-2">


                <h5 class="mt-4">Receiver Information</h5>

                <label class="form-label">Receiver Name</label>
                <input type="text" name="reci_name" value="{{ $parcel->reci_name }}" class="form-control mb-2">

                <label class="form-label">Receiver Address</label>
                <input type="text" name="reci_address" value="{{ $parcel->reci_address }}" class="form-control mb-2">

                <label class="form-label">Receiver Email</label>
                <input type="text" name="reci_contact" value="{{ $parcel->reci_contact }}" class="form-control mb-2">

                <label class="form-label">Receiver Phone Number</label>
                <input type="text" name="reci_phone" value="{{ $parcel->reci_phone }}" class="form-control mb-2">


                <hr>

                <h5>Shipment Information</h5>

                <label class="form-label">Departure Date</label>
                <input type="date" name="dep_date" value="{{ $parcel->dep_date }}" class="form-control mb-2">

                <label class="form-label">Pickup Date</label>
                <input type="date" name="pickup_date" value="{{ $parcel->pickup_date }}" class="form-control mb-2">

                <label class="form-label">Expected Delivery Date</label>
                <input type="date" name="exp_date" value="{{ $parcel->exp_date }}" class="form-control mb-2">

                <label class="form-label">Total Freight Cost</label>
                <input type="number" name="freight_cost" value="{{ $parcel->freight_cost }}" class="form-control mb-2">


                <hr>

                <h5>Status</h5>

                <label class="form-label">Updated Date</label>
                <input type="date" name="updated_date" value="{{ $track->updated_date ?? '' }}" class="form-control mb-2">

                <label class="form-label">Updated Time</label>
                <input type="time" name="updated_time" value="{{ $track->updated_time ?? '' }}" class="form-control mb-2">

                <label class="form-label">Current Status</label>
                <select name="cstatus" class="form-control mb-2">
                    <option selected>{{ $track->cstatus ?? 'Pending' }}</option>
                    <option>Pending</option>
                    <option>In Transit</option>
                    <option>Delivered</option>
                    <option>On Hold</option>
                </select>

                <label class="form-label">Current Location</label>
                <input type="text" name="location" value="{{ $track->location ?? '' }}" class="form-control mb-2">

                <label class="form-label">Remarks</label>
                <textarea name="remark" class="form-control mb-3">{{ $track->remark ?? '' }}</textarea>

                <button type="submit" class="btn btn-primary">Update Parcel</button>

            </form>

        </div>
    </div>

@endsection



@push('script')

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>

        $(document).ready(function () {

            function calculateTotal() {

                let total = 0;

                $('.price').each(function () {

                    let price = parseFloat($(this).val());

                    if (!isNaN(price)) {
                        total += price;
                    }

                });

                $('#total_price_display').val(total.toFixed(2));
                $('#total_price').val(total.toFixed(2));

            }

            $(document).on('click', '.addRow', function () {

                let row = `<tr>

    <td><input type="number" name="quantity[]" class="form-control"></td>

    <td>
    <select name="type[]" class="form-control">
    <option>Pallet</option>
    <option>Carton</option>
    <option>Crate</option>
    <option>Loose</option>
    <option>Others</option>
    </select>
    </td>

    <td><input type="number" name="width[]" class="form-control"></td>
    <td><input type="number" name="height[]" class="form-control"></td>
    <td><input type="number" name="weight[]" class="form-control"></td>
    <td><input type="number" name="length[]" class="form-control"></td>

    <td><textarea name="description[]" class="form-control"></textarea></td>

    <td><input type="number" step="0.01" name="price[]" class="form-control price"></td>

    <td><input type="file" name="image[]" class="form-control"></td>

    <td><button type="button" class="btn btn-danger removeRow">Remove</button></td>

    </tr>`;

                $('#packageTable tbody').append(row);

            });

            $(document).on('click', '.removeRow', function () {

                $(this).closest('tr').remove();

                calculateTotal();

            });

            $(document).on('keyup change', '.price', function () {

                calculateTotal();

            });

            calculateTotal();

        });

    </script>

@endpush