@extends('main')

@section('content')
    <section class="">
        <div class="content p-4">
            <div class="row pt-3">
                <div class="col-md-8">
                    <h3 class="">{{ __('lang.componentdetail') }}</h3>
                </div>
                <div class="col-md-4 text-md-end">
                    <a href="{{ route('components.index') }}" id="btndetail" class="btn btn-sm btn-fill btn-warning"><i class="ti-info"></i> {{ __('lang.backtocomponent') }}</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-md-9">
                                    <input type="hidden" id="componentid" value="{{ $component->id }}">
                                    <p class="title-detail font-bold"> <span class="componentname">{{ $component->name }}</span> </p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    {{ $componentAssetDataTable->table(['class' => 'table table-striped', 'width' => '100%'], true) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--add checkin -->
            <div id="checkin" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form action="#" method="POST" id="formcheckin" autocomplete="off">
                            <div class="modal-header">
                                <h5 class="modal-title">{{ __('lang.checkin') }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="form-group col-md-12">
                                        <label for="checkinname">{{ __('lang.component') }}</label>
                                        <input type="text" id="checkinname" class="componentname form-control" placeholder="{{ __('lang.component') }}" readonly required>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-12">
                                        <label for="checkinquantity">{{ __('lang.quantity') }}</label>
                                        <input type="number" name="quantity" id="checkinquantity" class="form-control" placeholder="{{ __('lang.quantity') }}" required>
                                        <label id="checkinquantity-error" class="error" for="checkinquantity" style="display: none;"></label>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-12 mb-0">
                                        <label for="checkindate" class="control-label">{{ __('lang.checkindate') }}</label>
                                        <div class="input-group mb-0">
                                            <input type="text" name="date" id="checkindate" class="form-control setdate" placeholder="{{ __('lang.checkindate') }}" required>
                                            <span id="date" class="input-group-addon border-1"><i class="fa fa-calendar"></i></span>
                                        </div>
                                        <label id="checkindate-error" class="error" for="checkindate" style="display: none;"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="savecheckin" class="btn btn-primary">{{ __('lang.save') }}</button>
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('lang.close') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!--end checkin-->
        </div>
    </section>
@endsection

@push('scripts')
    {{ $componentAssetDataTable->scripts() }}

    <script>
        $(document).ready(function() {
            // show checkin
            $(document).on('click', '.btncheckin', function(e) {
                let id = $(this).data('id');
                $('#formcheckin').attr('action', `{{ url('components/checkin') }}/${id}`);
                $('#formcheckin')[0].reset();
                $('#formcheckin').removeClass('was-validated');
                $('.is-invalid').removeClass('is-invalid');
                $('.error').html('');
                $('#checkin').modal('show');

                $.ajax({
                    type: "GET",
                    url: `{{ url('component_assets') }}/${id}`,
                    dataType: "JSON",
                    success: function(response) {
                        let data = response.data;

                        $("#checkinname").val(data.asset?.name);
                    }
                });
            });

            // checkin
            $("#formcheckin").validate({
                submitHandler: function(form) {
                    let formData = new FormData($(form)[0]);

                    $.ajax({
                        url: $(form).attr('action'),
                        dataType: 'json',
                        type: $(form).attr('method'),
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response.success) {
                                toastr.success(response.message);
                                $('#checkin').modal('hide');
                                window.LaravelDataTables['component_asset-table'].draw();
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: (response) => {
                            toastr.error(response.responseJSON.message);
                            let error = response.responseJSON.errors;
                            $.each(error, function(key, value) {
                                $(`#checkin${key}`).addClass('is-invalid');
                                $(`#checkin${key}-error`).html(value).fadeIn();
                            });
                        }
                    });
                }
            });
        });
    </script>
@endpush