@extends('gatepass/layouts/default')

@section('title')
    Cargodetail
    @parent
@stop

@section('content')
    @include('common.errors')
    <section class="content-header">
        <h1>Cargodetail</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>Cargodetails</li>
            <li class="active">Create Cargodetail</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 CarCarrier RORO
                            </h4></div>
                        <br />
                        <div class="card-body">
                            <div class="row" style="background-color: #fefee0">
                                <table class="table table-striped table-bordered" id="cargoheaders-table" width="100%">
                                    <thead>
                                    <tr>
                                        <th>T1</th>
                                        <th>Declaration No</th>
                                        <th>Consignee</th>
                                        <th>Transitor</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    @foreach($cargoheaders as $cargoheader)
                                        <tr>
                                            <td>{!! Form::label('t1', $cargoheader->t1) !!}</td>
                                            <td>    {!! Form::label('declaration', $cargoheader->cargodeclarations->declaration_number) !!}
                                            </td>
                                            <td>   {!! Form::label('consignee', $cargoheader->cargodeclarations->consignees->name) !!}
                                            </td>
                                            <td> {!! Form::label('consignee',$cargoheader->cargodeclarations->transitors->name) !!}
                                            </td>
                                        </tr>

                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            {{--                            {!! Form::open(['route' => 'admin.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.cargodetails.mass.store','id'=>'formdetail','target'=>'_blank']) !!}
                            @foreach($cargoheaders as $cargoheader)
                                <input hidden name="id_{{ $cargoheader->id }}" value="{{ $cargoheader->id }}">
                            @endforeach
                            <input hidden name="truck_id" value="{{ $truck_id }}">


                            <div class="row">

                                <div class="form-group col-sm-3">
                                    {!! Form::label('full_name', 'Driver Full Name:') !!}<br>
                                    {!! Form::text('full_name', null, ['class' => 'form-control full_name']) !!}
                                </div>
                                <div class="form-group col-sm-3">
                                    {!! Form::label('licence_number', 'Licence number:') !!}<br>
                                    {!! Form::text('licence_number', null, ['class' => 'form-control licence_number']) !!}
                                </div>
                                <div class="form-group col-sm-1">
                                    <br>
                                    {{--                                        <input style='margin-left: -10px;align-items: end'>--}}
                                    {!! Form::text('plate_front', $plate_front, ['class' => 'form-control','style'=>'padding-left: 30px']) !!}
                                </div>
                                <div class="form-group col-sm-2">
                                    {!! Form::label('plate_number', 'Plate Number:') !!}<br>
                                    {!! Form::text('plate_number', $plate_number, ['class' => 'form-control','style'=>'margin-left: -30px;']) !!}
                                </div>
                                <div class="form-group col-sm-1">
                                    <br>
                                    {{--                                        <input style='margin-left: -10px'>--}}
                                    {!! Form::text('trailer_front', $trailer_front, ['class' => 'form-control','style'=>'padding-left: 30px']) !!}
                                </div>
                                <div class="form-group col-sm-2">
                                    {!! Form::label('trailer_plate_number', 'Trailer Plate Number:') !!}<br>
                                    {!! Form::text('trailer_plate_number', $trailer_plate_number, ['class' => 'form-control','style'=>'margin-left: -30px;']) !!}
                                </div>

                            </div>
                            <div class="row">

                                <div class="form-group col-sm-4">
                                    {!! Form::label('Confirmed date', 'Confirmed date:') !!}
                                    {!! Form::date('created_date', date('Y-m-d'), ['class' => 'form-control']) !!}
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <!-- Weight Field -->
                                <div class="form-group col-sm-3">
                                    {!! Form::label('weight', 'Weight:') !!}
                                    {!! Form::text('weight', $gross_weight, ['class' => 'form-control weight']) !!}
                                </div>
                                <!-- Quantity Field -->
                                <div class="form-group col-sm-3">
                                    {!! Form::label('quantity', 'Quantity:') !!}
                                    {!! Form::text('quantity', $total_quantity, ['class' => 'form-control quantity']) !!}
                                </div>
                                <!-- Description Of Good Field -->
                                <div class="form-group col-sm-6">
                                    {!! Form::label('description_of_good', 'Description Of Good:') !!}
                                    {!! Form::text('description_of_good', $good_description, ['class' => 'description_of_good form-control']) !!}
                                </div>
                            </div>
                            <div class="form-group col-sm-12 text-center">
                                {!! Form::submit('Confirm & Gatepass', ['class' => 'btn btn-warning','id'=>'savedetail']) !!}
                                <a href="{!! route('gatepass.cargodetails.index') !!}"
                                   class="btn btn-secondary">Cancel</a>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </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();
            $('.containerized').hide();
            var displayme = $('#formdisplay').val();
            if (displayme == 1) {
                $('.containerized').show();
            } else if (displayme == 3) {
                $('.roro').show();
            } else {
                $('.bulk').show();
            }
        });

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

            console.log(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('.seal_number').attr('name', 'seal_number_' + index);
                $(newel).find('.seal_number').attr('id', 'seal_number_' + 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('.plope_quantity').attr('name', 'plope_quantity_' + index);
                $(newel).find('.plope_quantity').attr('id', 'plope_quantity_' + 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();
            // we will do validation
            $('#formdetail').submit();
        });
    </script>
@stop