@extends('layouts.app')
@push('css')
    <style>
        table .form-control {
            min-width: 120px
        }
    </style>
@endpush
@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span> {{ __('Permits') }}
            </h3>
        </div>
        <form id="add-form" action="{{ route('dashboard.inventories.libra.store') }}" method="get">
            <input type="hidden" name="permit_id" value="{{ $permit->id }}">
            @csrf
            <div class="card p-3">
                <div class="card">
                    <div class="card-header text-center">
                        <div class="card-title">
                            {{ __('Create Libra For Permit') }} #{{ $permit->id }}
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <div class="table-responsive">

                                    <table class="table table-borderd table-striped">
                                        <thead>
                                            <tr>
                                                <th>{{ __('Items Name') }}</td>
                                                <th>{{ __('Inventories') }}</td>
                                                <th>{{ __('Weight Before Packing') }}</td>
                                                <th>{{ __('Weight After Packing') }}</td>
                                                <th>{{ __('Items Weight') }}</td>
                                                <th>{{ __('Quntity/Weight') }}</td>
                                                <th>{{ __('Name Of The Recipient') }}</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    @foreach ($permit->items as $item)
                                                        {{ $item->product->item->name }},
                                                    @endforeach
                                                </td>
                                                <td>
                                                    @foreach ($permit->items as $item)
                                                        {{ $item->product->inventory->name }},
                                                    @endforeach
                                                </td>
                                                <td>
                                                    <input type="number" name="weight_before_packing" class="form-control weight_before_packing" >
                                                </td>
                                                <td>
                                                    <input type="number" name="weight_after_packing" class="form-control weight_after_packing"
                                                        >
                                                </td>
                                                <td>
                                                    <input type="number" readonly name="item_weight" class="form-control items_weight" >
                                                </td>
                                                <td>
                                                    {{ $permit->container_quantity }}
                                                </td>
                                                <td>
                                                    <input type="text" name="name_of_the_recipient" class="form-control"
                                                        >
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <div class="table-responsive">
                                    <table class="table table-borderd table-striped">
                                        <thead>
                                            <tr>
                                                <th colspan="2">{{ __('Driver Name') }}</td>
                                                <th>{{ __('Entry Time') }}</td>
                                                <th>{{ __('Time Out') }}</td>
                                                <th>{{ __('Truck length') }}</td>
                                                <th>{{ __('Truck width') }}</td>
                                                <th>{{ __('Truck height') }}</td>
                                                <th>{{ __('Truck back') }}</td>
                                                <th>{{ __('Total') }}</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    {{ __('Name') }}
                                                </td>
                                                <td>
                                                    {{ $permit->driver_name }}
                                                </td>
                                                <td rowspan="2">
                                                    <input type="datetime-local" name="entry_time" class="form-control date"
                                                        >
                                                </td>
                                                <td rowspan="2">
                                                    <input type="datetime-local" name="time_out" class="form-control date"
                                                        >
                                                </td>
                                                <td rowspan="2">
                                                    <input type="number" name="truck_length" class="form-control truck_length" >
                                                </td>
                                                <td rowspan="2">
                                                    <input type="number" name="truck_width" class="form-control truck_width" >
                                                </td>
                                                <td rowspan="2">
                                                    <input type="number" name="truck_height" class="form-control truck_height" >
                                                </td>
                                                <td rowspan="2">
                                                    <input type="number" name="truck_back" class="form-control truck_back" >
                                                </td>
                                                <td rowspan="2">
                                                    <input type="number" name="total" class="form-control total" >
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    {{ __('Phone') }}
                                                </td>
                                                <td>
                                                    {{ $permit->phone_number }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-12 mt-4 text-center">
                                <button class="btn btn-primary">{{ __('Save') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
        </form>
    </div>

    <div></div>
    </div>
@endsection

@section('scripts')
    <script>
        $(".remove-item").on('click', function() {
            $(this).closest('tr').remove();
        })
        $('#add-form').on('submit', function(e) {
            e.preventDefault();

            $(".is-invalid").removeClass('is-invalid')
            $(".invalid-feedback").remove()
            var formData = $(this).serialize(); // Form data now includes inventory_location_id
            $('button[type="submit"]').prop('disabled', true);
            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: formData,
                success: function(response) {
                    $('button[type="submit"]').prop('disabled', false);
                    $('#add-modal').modal('hide');
                    Swal.fire({
                        title: 'Success',
                        icon: 'success',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                    // setTimeout(() => {
                    //     if (response.redirect) {
                    //         window.location.href = response.redirect;
                    //     }
                    // }, 2000);
                    $('#add-form')[0].reset();
                },
                error: function(xhr) {
                    $('button[type="submit"]').prop('disabled', false);
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('[name="' + key + '"]').addClass('is-invalid');
                            $('[name="' + key + '"]').after('<div class="invalid-feedback">' +
                                value + '</div>');
                        });
                    }
                }
            });
        });
        $('.weight_before_packing,.weight_after_packing').on('input',calculateItemWeight);
        function calculateItemWeight(){
            var weight_before_packing = $('.weight_before_packing').val();
            var weight_after_packing = $('.weight_after_packing').val();
            var items_weight = weight_before_packing - weight_after_packing;
            $('.items_weight').val(items_weight);
        }
        $('.truck_length,.truck_width,.truck_height,.truck_back').on('input',calculateTotal);
        function calculateTotal(){
            var truck_length = $('.truck_length').val();
            var truck_width = $('.truck_width').val();
            var truck_height = $('.truck_height').val();
            var truck_back = $('.truck_back').val();
            var total = truck_length * truck_width * truck_height * truck_back;
            $('.total').val(total);
        }
    </script>
@endsection