@extends('layouts.admin-dash')

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

@section('content')

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

        <div class="card-body">

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

                <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>

                        <tr>

                            <td>
                                <input type="number" style="width:60px;" name="quantity[]" class="form-control">
                                @error('quantity.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <select name="type[]" style="width:70px;" class="form-control">
                                    <option>Pallet</option>
                                    <option>Carton</option>
                                    <option>Crate</option>
                                    <option>Loose</option>
                                    <option>Others</option>
                                </select>
                                @error('type.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <input type="number" width="100" name="width[]" class="form-control">
                                @error('width.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <input type="number" name="height[]" class="form-control">
                                @error('height.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <input type="number" name="weight[]" class="form-control">
                                @error('weight.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <input type="number" name="length[]" class="form-control">
                                @error('length.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <textarea name="description[]" class="form-control"></textarea>
                                @error('description.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <input type="number" step="0.01" name="price[]" style="width:70px;"
                                    class="form-control price">
                                @error('price.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

                            <td>
                                <input type="file" name="image[]" class="form-control">
                                @error('image.0')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </td>

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

                        </tr>

                    </tbody>

                </table>

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

                        <label>Total Price</label>
                        <input type="text" id="total_price_display" class="form-control bg-light" readonly>

                        <input type="hidden" name="total_price" id="total_price">

                    </div>
                </div>

                <hr>

                <h5>Sender Information</h5>

                <label>Sender Name</label>
                <input type="text" name="sender_name" class="form-control mb-2">
                @error('sender_name')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Sender Address</label>
                <input type="text" name="sender_address" class="form-control mb-2">
                @error('sender_address')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Sender Email</label>
                <input type="text" name="sender_contact" class="form-control mb-2">
                @error('sender_contact')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Sender Phone Number</label>
                <input type="text" name="sender_phone" class="form-control mb-2">
                @error('sender_phone')
                    <small class="text-danger">{{ $message }}</small>
                @enderror


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

                <label>Receiver Name</label>
                <input type="text" name="reci_name" class="form-control mb-2">
                @error('reci_name')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Receiver Address</label>
                <input type="text" name="reci_address" class="form-control mb-2">
                @error('reci_address')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Receiver Email</label>
                <input type="text" name="reci_contact" class="form-control mb-2">
                @error('reci_contact')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Receiver Phone Number</label>
                <input type="text" name="reci_phone" class="form-control mb-2">
                @error('reci_phone')
                    <small class="text-danger">{{ $message }}</small>
                @enderror


                <hr>

                <h5>Shipment Information</h5>

                <label>Departure Date</label>
                <input type="date" name="dep_date" class="form-control mb-2">
                @error('dep_date')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Pickup Date</label>
                <input type="date" name="pickup_date" class="form-control mb-2">
                @error('pickup_date')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Expected Delivery Date</label>
                <input type="date" name="exp_date" class="form-control mb-2">
                @error('exp_date')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Total Freight Cost</label>
                <input type="number" step="0.01" name="freight_cost" class="form-control mb-2">
                @error('freight_cost')
                    <small class="text-danger">{{ $message }}</small>
                @enderror


                <hr>

                <h5>Status</h5>

                <label>Updated Date</label>
                <input type="date" name="updated_date" class="form-control mb-2">
                @error('updated_date')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Updated Time</label>
                <input type="time" name="updated_time" class="form-control mb-2">
                @error('updated_time')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Current Status</label>
                <select name="cstatus" class="form-control mb-2">
                    <option>Pending</option>
                    <option>In Transit</option>
                    <option>Delivered</option>
                    <option>Cancelleda</option>
                    <option>On Hold</option>
                </select>
                @error('cstatus')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Current Location</label>
                <input type="text" name="location" class="form-control mb-2">
                @error('location')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <label>Remarks</label>
                <textarea name="remark" class="form-control mb-3"></textarea>
                @error('remark')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <button type="submit" class="btn btn-primary">Create 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;

                $('#packageTable tbody .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();

            });

        });

    </script>

@endpush