@extends('gatepass/layouts/default')

@section('title')
    Cargo Header
    @parent
@stop

@section('content')
    @include('common.errors')
    <section class="content-header">
        <h1>Cargo Header</h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('gatepass.dashboard') }}"> <i class="livicon" data-name="home" data-size="16"
                                                             data-color="#000"></i>
                    Dashboard
                </a>
            </li>
            <li>Cargod Header</li>
            <li class="active">Create Cargo header with detail</li>
        </ol>
    </section>
    <section class="content">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <h4 class="card-title"><i class="livicon" data-name="user" data-size="16" data-loop="true"
                                                      data-c="#fff" data-hc="white"></i>
                                Create New Cargodetail
                            </h4></div>
                        <br/>
                        <div class="card-body">
                            <div class="row" style="background-color: #a0aec0">

                                <div class="form-group col-sm-2">
                                    {!! Form::label('declaration', 'Declaration No:') !!}<br>
                                    {!! Form::label('declaration', $cargodeclaration->declaration_number) !!}
                                </div>
                                <div class="form-group col-sm-3">
                                    {!! Form::label('consignee', 'Consignee:') !!}<br>
                                    {!! Form::label('consignee', $cargodeclaration->consignees->name) !!}
                                </div>
                                <div class="form-group col-sm-3">
                                    {!! Form::label('consignee', 'Transitor:') !!}<br>
                                    {!! Form::label('consignee',$cargodeclaration->transitors->name) !!}
                                </div>
                            </div>
                            {{--                            {!! Form::open(['route' => 'gatepass.cargoheaders.check']) !!}--}}
                            <div class="row">

                                <div class="form-group col-sm-4">
                                    {!! Form::label('licence_no', 'Licence:') !!}
                                    {!! Form::text('licence_no', null, ['class' => 'form-control','id'=>'driver_licence', 'placeholder'=>'Driver licence no']) !!}
                                </div>
                                <div class="form-group col-sm-6">
                                    {!! Form::label('', '') !!}<br>
                                    {!! Form::submit('Check',['id'=>'check','class'=>'btn btn-sm btn-info']); !!}
                                </div>

                            </div>

                            {!! Form::open(['route' => 'gatepass.cargoheaders.store','id'=>'formdetail']) !!}
                            <div class="row">

                                <div class="form-group col-sm-4">
                                    {!! Form::label('full_name', 'Full Name:') !!}<br>
                                    {!! Form::text('full_name', null, ['class' => 'form-control full_name']) !!}
                                </div>
                                <div class="form-group col-sm-4">
                                    {!! Form::label('licence_number', 'Licence number:') !!}<br>
                                    {!! Form::text('licence_number', null, ['class' => 'form-control licence_number']) !!}
                                </div>

                            </div>
                            <input class="" hidden name="id" value="{{ $cargodeclaration->id }}">
                            <input style="display:none;" name="formcount" value="1" id="formcountid">
                            {{--                            {!! Form::close() !!}--}}
                            <div class="row">

                                <div class="form-group col-sm-4">
                                    <div class="row">
                                        <div class="form-group col-sm-4">
                                            {!! Form::label('year', 'Year') !!}<br>
                                            {!! Form::text('year', 2023, ['class' => 'form-control']) !!}
                                        </div>
                                        <div class="form-group col-sm-8">
                                            {!! Form::label('t1', 'T1:') !!}<br>
                                            {!! Form::text('t1', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group col-sm-4">
                                    {!! Form::label('plate_number', 'Plate Number:') !!}<br>
                                    {!! Form::text('plate_number', null, ['class' => 'form-control']) !!}
                                </div>
                                <div class="form-group col-sm-4">
                                    {!! Form::label('trailer_plate_number', 'Trailer Plate Number:') !!}<br>
                                    {!! Form::text('trailer_plate_number', null, ['class' => 'form-control']) !!}
                                </div>

                            </div>

                            <div class="row">
                                <!-- Consignee Field -->
                                <div class="form-group col-sm-4">
                                    {!! Form::label('cargotype', 'Cargo type:') !!}
                                    {!! Form::select('cargotype', $cargotype, 1, ['class' => 'form-control','id'=>'cargo_type']) !!}
                                </div>
                            </div>
                            <hr>

                            @include('gatepass.cargoheaders.fields_detail')

                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@stop
@section('footer_scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $("form").submit(function () {
                $('input[type=submit]').attr('disabled', 'disabled');
                return true;
            });
            $(".roro").hide();
            $(".bulk").hide();
        });

        $('#cargo_type').on('change', function () {
            var selected = $(this).val();
            // alert(selected);
            if (selected == 1) {
                $(".containerized").show();
                $(".roro").hide();
                $(".bulk").hide();
            } else if (selected == 2) {
                $(".containerized").hide();
                $(".roro").hide();
                $(".bulk").show();
            } else {
                $(".containerized").hide();
                $(".roro").show();
                $(".bulk").hide();
            }
        });

        $('#add-form').click(function (e) {
            e.preventDefault();
            var count = $('#formcountid').val();
            count = parseInt(count) + 1;
            count = count.toString();
            $('input[id=formcountid]').val(count);

            var selected = $("#cargo_type").val();
            if (selected == 1) {
                // alert(selected);
                var index = $('.containerized').length;
                // alert(index);
                index = index + 1;
                // Create clone
                var newel = $("#containerized").clone(true).prop('id', "containerized_" + index);
                $(newel).find(".minus_me").attr("id", "minus_" + index);
                $(newel).find(":button").attr("value", "containerized_" + index);
                // Set name of new element
                $(newel).find(".container_number").attr("name", "container_number_" + index);
                $(newel).find(".container_number").attr("id", "container_number_" + index);
                $(newel).find(".container_type").attr("name", "container_type_" + index);
                $(newel).find(".container_type").attr("id", "container_type_" + index);
                $(newel).find('.container_size').attr("name", "container_size_" + index);
                $(newel).find('.container_size').attr("id", "container_size_" + index);
                $(newel).find('.terminal_location').attr("name", "terminal_location_" + index);
                $(newel).find('.terminal_location').attr("id", "terminal_location_" + index);

                var newother = $("#other").clone(true).prop('id', "other_" + index);
                $(newother).find(".weight").attr("name", "weight_" + index);
                $(newother).find(".weight").attr("id", "weight_" + index);
                $(newother).find(".quantity").attr("name", "quantity_" + index);
                $(newother).find(".quantity").attr("id", "quantity_" + index);
                $(newother).find(".bill_of_ladding").attr("name", "bill_of_ladding_" + index);
                $(newother).find(".bill_of_ladding").attr("id", "bill_of_ladding_" + index);
                $(newother).find(".description_of_good").attr("name", "description_of_good_" + index);
                $(newother).find(".description_of_good").attr("id", "description_of_good_" + index);
                $(newother).find(".measurment").attr("name", "measurment_" + index);
                $(newother).find(".measurment").attr("id", "measurment_" + index);
                $(newother).find(".remark").attr("name", "remark_" + index);
                $(newother).find(".remark").attr("id", "remark_" + index);

                // Insert element
                $(newel).insertAfter(".other:last");
                $('<hr>').insertAfter(".other:last");
                $(newother).insertAfter(".containerized:last");
                $("#minus_" + index).css('visibility', 'visible');


            } else if (selected == 2) {
                var index = $('.bulk').length;
                // alert(index);
                index = index + 1;
                // Create clone
                var newel = $("#bulk").clone(true).prop('id', "bulk_" + index);
                $(newel).find(".minus_me").attr("id", "minusb_" + index);
                $(newel).find(":button").attr("value", "bulk_" + index);
                // Set name of new element
                $(newel).find(".bb_type").attr("name", "bb_type_" + index);
                $(newel).find(".bb_type").attr("id", "bb_type_" + index);
                $(newel).find(".truck_location").attr("name", "truck_location_" + index);
                $(newel).find(".truck_location").attr("id", "truck_location_" + index);

                var newother = $("#other").clone(true).prop('id', "otherb_" + index);
                $(newother).find(".weight").attr("name", "weight_" + index);
                $(newother).find(".weight").attr("id", "weight_" + index);
                $(newother).find(".quantity").attr("name", "quantity_" + index);
                $(newother).find(".quantity").attr("id", "quantity_" + index);
                $(newother).find(".bill_of_ladding").attr("name", "bill_of_ladding_" + index);
                $(newother).find(".bill_of_ladding").attr("id", "bill_of_ladding_" + index);
                $(newother).find(".description_of_good").attr("name", "description_of_good_" + index);
                $(newother).find(".description_of_good").attr("id", "description_of_good_" + index);
                $(newother).find(".measurment").attr("name", "measurment_" + index);
                $(newother).find(".measurment").attr("id", "measurment_" + index);
                $(newother).find(".remark").attr("name", "remark_" + index);
                $(newother).find(".remark").attr("id", "remark_" + index);

                // Insert element
                $(newel).insertAfter(".other:last");
                $('<hr>').insertAfter(".other:last");
                $(newother).insertAfter(".bulk:last");
                $("#minusb_" + index).css('visibility', 'visible');

            } else {
                var index = $('.roro').length;
                // alert(index);
                index = index + 1;
                // Create clone
                var newel = $("#roro").clone(true).prop('id', "roro_" + index);
                $(newel).find(".minus_me").attr("id", "minusr_" + index);
                $(newel).find(":button").attr("value", "roro_" + index);
                // Set name and id of new element
                $(newel).find(".roro_type").attr("name", "roro_type_" + index);
                $(newel).find(".roro_type").attr("id", "roro_type_" + index);

                $(newel).find(".chassis_number").attr("name", "chassis_number_" + index);
                $(newel).find(".chassis_number").attr("id", "chassis_number_" + index);

                $(newel).find(".roro_location").attr("name", "roro_location_" + index);
                $(newel).find(".roro_location").attr("id", "roro_location_" + index);

                var newother = $("#other").clone(true).prop('id', "otherr_" + index);
                $(newother).find(".weight").attr("name", "weight_" + index);
                $(newother).find(".weight").attr("id", "weight_" + index);
                $(newother).find(".quantity").attr("name", "quantity_" + index);
                $(newother).find(".quantity").attr("id", "quantity_" + index);
                $(newother).find(".bill_of_ladding").attr("name", "bill_of_ladding_" + index);
                $(newother).find(".bill_of_ladding").attr("id", "bill_of_ladding_" + index);
                $(newother).find(".description_of_good").attr("name", "description_of_good_" + index);
                $(newother).find(".description_of_good").attr("id", "description_of_good_" + index);
                $(newother).find(".measurment").attr("name", "measurment_" + index);
                $(newother).find(".measurment").attr("id", "measurment_" + index);
                $(newother).find(".remark").attr("name", "remark_" + index);
                $(newother).find(".remark").attr("id", "remark_" + index);

                // Insert element
                $(newel).insertAfter(".other:last");
                $('<hr>').insertAfter(".other:last");
                $(newother).insertAfter(".roro:last");
                $("#minusr_" + index).css('visibility', 'visible');
            }

        });

        $(".minus").click(function (e) {
            e.preventDefault();
            var count = $('#formcountid').val();
            count = count - 1;
            $('#formcountid').val(count);
            var element = $(this).val();
            var indx = element.split('_');
            element = '#' + element;
            var other = '#other_' + indx[1];
            var otherb = '#otherb_' + indx[1];
            var otherr = '#otherr_' + indx[1];
            $('div').remove(element);
            $('div').remove(other);
            $('div').remove(otherb);
            $('div').remove(otherr);
            $('hr:last').remove();

        });

        $("#check").click(function (e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });

            $.ajax({
                url: "{{ url('/gatepass/cargoheaders/check') }}",
                method: 'post',
                data: {
                    driver_licence: $('#driver_licence').val(),
                },
                success: function (result) {
                    // console.log(result);
                    $('.full_name').attr('value', result.fullname)
                    $('.licence_number').attr('value', result.licence)
                }
            });

        });

        // $("#savedetail").click(function (e) {
        //     e.preventDefault();
        //     // alert();

        //     $('#formdetail').submit();
        // });

    </script>
@stop