@extends('layouts.app')
@push('css')
    @include('components.dataTable-style-links')
@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.permits.store') }}" method="get">
            <input type="hidden" name="serial_number" value="{{ $invoice->serial_number }}"/>
            <input type="hidden" name="type" value="{{ $type }}"/>
            <div class="card p-3">
                <div class="card">
                    <div class="card-header text-center">
                        <div class="card-title">
                            {{ __('Create Permit For Invoice') }} #{{ $invoice->serial_number }}
                            
                        </div>
                        @if ($type == 'sale')
                            <div class="card-title">
                                    {{ __('Customer Name :') }} {{ $invoice->customer->name }}
                            </div>
                        @endif
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Driver Name') }}</label>
                                <input type="text" class="form-control" name="driver_name">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Truck Number') }}</label>
                                <input type="text" class="form-control" name="truck_number">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Trailer Number') }}</label>
                                <input type="text" class="form-control" name="trailer_number">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Phone Number') }}</label>
                                <input type="text" class="form-control" name="phone_number">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Container Number') }}</label>
                                <input type="number" class="form-control" name="containers_number">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Container Quantity') }}</label>
                                <input type="number" class="form-control" name="container_quantity" value="{{ $container_quantites }}">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label>{{ __('Permit Date') }}</label>
                                <input type="datetime-local" value="{{ now()->format('Y-m-d\TH:i') }}" class="form-control date" name="date">
                            </div>
                            <div class="col-md-12 mt-3">
                                <h3>{{ __('Items') }}</h3>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>{{ __('Item Name') }}</th>
                                                @if ($type == 'purchase')
                                                    <th>{{ __('Supplier') }}</th>
                                                @endif
                                                <th>{{ __('Action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($invoice->items as $item)
                                                <tr>
                                                    <td>
                                                        <input hidden name="items[]" value="{{ $item->id }}">
                                                        {{ $item->item->name }}
                                                    </td>
                                                    @if ($type == 'purchase')
                                                        <td>{{ $item->supplier->name }}</td>
                                                    @endif
                                                    <td class="text-center">
                                                        <button type="button" class="btn btn-sm remove-item">
                                                            <i class="fas fa-times text-danger"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-12 mt-4 text-center">
                                <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    @include('components.dataTable-script-links')
    <script>
        $(".remove-item").on('click', function() {
            $(this).closest('tr').remove();
        });

        $('#add-form').on('submit', function(e) {
            e.preventDefault();

            var submitButton = $('button[type="submit"]');
            if (submitButton.prop('disabled')) {
                return false;
            }
            submitButton.prop('disabled', true);

            $(".is-invalid").removeClass('is-invalid');
            $(".invalid-feedback").remove();
            var formData = $(this).serialize();

            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: formData,
                success: function(response) {
                    Swal.fire({
                        title: 'Success',
                        icon: 'success',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });

                    if(response.redirect) {
                        setTimeout(() => {
                            window.location.href = response.redirect;
                        }, 2000);
                    } else {
                        $('#add-form')[0].reset();
                        var secondsLeft = 5;
                        var originalText = submitButton.text();

                        var countdownInterval = setInterval(function() {
                            secondsLeft--;
                            submitButton.text(originalText + ' (' + secondsLeft + ')');

                            if (secondsLeft <= 0) {
                                clearInterval(countdownInterval);
                                submitButton.text(originalText);
                                submitButton.prop('disabled', false);
                            }
                        }, 1000);
                    }
                },
                error: function(xhr) {
                    submitButton.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>');
                        });
                    }
                }
            });
        });

        $(".remove-item").on('click', function() {
            $(this).closest('tr').remove();
        });

        $('.date').on('click', function(){
            $(this).prop('readonly', true);
        });
    </script>
@endsection