@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" type="text/css"
          href="{{ asset('modern/app-assets/vendors/css/forms/selects/select2.min.css')}}">

    <link rel="stylesheet" type="text/css" href="{{ asset('modern/app-assets/vendors/css/forms/icheck/icheck.css')}}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern/app-assets/vendors/css/forms/icheck/custom.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{ asset('modern/app-assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{ asset('modern/app-assets/vendors/css/pickers/pickadate/pickadate.css')}}">

    <link rel="stylesheet" type="text/css" href="{{ asset('modern/app-assets/css/core/colors/palette-gradient.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{ asset('modern/app-assets/css/plugins/pickers/daterange/daterange.css')}}">
    <style>

    </style>
@endsection

@section('content')

    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-header separator">
                    <h4 class="card-title" id="heading-buttons1">@if($row->is_paid != 1) Edit Invoice @else View Invoice @endif</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">

                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <form role="form" action="{{url('invoices/'.$row->id)}}" method="POST"
                              class="supplier_add form-validations">

                            <div class="row pad-ro">
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Name <span class="red">*</span></label>
                                        <input type="text" class="form-control validate[required]" @if($row->is_paid == 1) disabled @endif
                                               name="name" value="{{$row->name}}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Tour Name <span class="red">*</span></label>
                                        <input type="text" class="form-control validate[required]" @if($row->is_paid == 1) disabled @endif
                                               name="tour_name" value="{{$row->tour_name}}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Booking File No <span class="red">*</span></label>
                                        <input type="text" class="form-control validate[required]" @if($row->is_paid == 1) disabled @endif
                                               name="bfn_number" value="{{$row->bfn_number}}">
                                    </div>
                                </div>
                            </div>
                            <div class="row pad-ro">
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Receiver Email <span class="red">*</span></label>
                                        <input type="text" class="form-control" name="email" @if($row->is_paid == 1) disabled @endif value="{{$row->email}}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Invoice Date <span class="red">*</span></label>
                                        <input type="text" class="form-control pickadate validate[required]" @if($row->is_paid == 1) disabled @endif
                                               value="{{$row->invoice_date}}" name="invoice_date">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-style required">
                                        <label>Amount (USD) <span class="red">*</span></label>
                                        <input type="number"
                                               class="form-control decimal_numbers_only q_id1 validate[required]" @if($row->is_paid == 1) disabled @endif
                                               min="0"
                                               name="amount" value="{{$row->amount}}">
                                    </div>
                                </div>
                            </div>

                            <div class="row pad-ro">
                                <div class="col-md-12">
                                    <div class="form-group form-group-style required">
                                        <label>Description</label></br>
                                        <textarea name="description" id="ckeditor-color" cols="30" rows="15" @if($row->is_paid == 1) disabled @endif
                                                  class="ckeditor-color">{{$row->description}}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="clearfix">
                                <div class="float-right">
                                    <button class="btn btn-warning btn-min-width btn-cons cancel-btn" type="button"
                                            data-redirect_url="{{url('invoice')}}">
                                        <i class="ft-x"></i>Cancel
                                    </button>
                                    @if($row->is_paid != 1)
                                        {{--<button style=""--}}
                                                {{--class="btn btn-info btn-min-width btn-cons image-form-save-only"--}}
                                                {{--type="button"--}}
                                                {{--data-formname="supplier_add"--}}
                                                {{--data-posttype="POST">--}}
                                            {{--<i class="la la-check-square-o"></i> Update--}}
                                        {{--</button>--}}
                                        <button style="margin-right: 3px;"
                                                class="btn btn-info btn-min-width btn-cons image-form-save"
                                                type="button"
                                                data-formname="supplier_add"
                                                data-posttype="POST">
                                            <i class="la la-check-square-o"></i> Update and Send
                                        </button>
                                    @endif
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('script')
    <script src="{{ asset('modern/app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>

    <script src="{{ asset('modern/app-assets/vendors/js/forms/icheck/icheck.min.js')}}"></script>
    <script src="{{ asset('modern/app-assets/js/scripts/forms/checkbox-radio.js')}}"></script>

    <script src="{{ asset('modern/app-assets/vendors/js/editors/ckeditor/ckeditor.js')}}"></script>

    <script src="{{ asset('modern/app-assets/vendors/js/pickers/pickadate/picker.js')}}"></script>
    <script src="{{ asset('modern/app-assets/vendors/js/pickers/pickadate/picker.date.js')}}"></script>
    <script src="{{ asset('modern/app-assets/vendors/js/pickers/pickadate/picker.time.js')}}"></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        $(document).ready(function () {
            $(".select2").select2();

            editor = CKEDITOR.replace('ckeditor-color', {
                height: '350px',
                uiColor: '#CCEAEE'
            });

            $('.pickadate').pickadate({
                // Escape any 'rule' characters with an exclamation mark (!).
                format: 'yyyy-mm-dd',
                //formatSubmit: 'yyyy-mm-dd',
                selectYears: 8,
                //max: ['2025','Dec','Sun']
            });

            var removeInput = "";
            $(".exist_delete").click(function () {
                var rmId = $(this).data('remove');
                removeInput += '<input type="hidden" name="hd_remove_personal[]" value="' + rmId + '">';

                $(".element:last").after(removeInput);

            });

            var removeInputCp = "";
            $(".btn_remove_cp_exist").click(function () {
                var rmId = $(this).data('remove');
                removeInputCp += '<input type="hidden" name="hd_remove_cp[]" value="' + rmId + '">';

                $(".element:last").after(removeInputCp);

            });

            var i = '0';
            $('#add').click(function () {
                i++;
                var bank_details = '<div class="bnk-wrap mt-1" id="row' + i + '">' +
                    '<button type="button" name="remove"  id="' + i + '" style ="margin-bottom: 13px;" class="btn btn-danger btn_remove pull-right"><i class="ft-x"></i></button>' +

                    '<div class="row pad-ro ">' +
                    '<div class="col-md-12 card-title">Personal Bank Details - English</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_name[]" value = "" >' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account No </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_no[]"  value = "">' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_branch_name[]"  value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Address </label>' +
                    '<input type="text" class="form-control " name="su_bank_address[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Swift code </label>' +
                    '<input type="text" class="form-control " name="su_bank_swift_code[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +

                    '</div>' +
                    '</div> ' +

                    '<div class="row pad-ro " >' +
                    '<div class="col-md-12 card-title">Personal Bank Details - Secondary</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_name_sec[]" value = "" >' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account No </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_no_sec[]"  value = "">' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_branch_name_sec[]"  value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Address </label>' +
                    '<input type="text" class="form-control" name="su_bank_address_sec[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Swift code </label>' +
                    '<input type="text" class="form-control" name="su_bank_swift_code_sec[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +

                    '</div>' +
                    '</div> ' +

                    '</div>';

                $('#dynamic_field').append(bank_details);
            });


            $(document).on('click', '.btn_remove', function () {
                var button_id = $(this).attr("id");
                $('#row' + button_id + '').remove();
            });


            var c = '0';
            ;
            $('#add_coporate').click(function () {
                c++;
                var cop_html = '<div class="bnk-wrap mt-1" id="row_cp' + c + '">' +
                    '<button type="button" name="remove" id="' + c + '"  style ="margin-bottom: 13px;" class="btn btn-danger btn_remove_cp pull-right"><i class="ft-x"></i></button>' +
                    '<div class="row pad-ro" >' +
                    '<div class="col-md-12 card-title">Coporate Bank Details  - English</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_name_coporate[]" value = "" >' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account No </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_no_coporate[]"  value = "">' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_branch_name_coporate[]"  value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Address </label>' +
                    '<input type="text" class="form-control " name="su_bank_address_coporate[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Swift code </label>' +
                    '<input type="text" class="form-control " name="su_bank_swift_code_coporate[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4"> ' +

                    '</div>' +
                    '</div>' +

                    '<div class="row pad-ro" >' +
                    '<div class="col-md-12 card-title">Coporate Bank Details  - Secondary</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_name_coporate_sec[]" value = "" >' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Account No </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_no_coporate_sec[]"  value = "">' +
                    '</div>' +
                    '</div> ' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Name </label>' +
                    '<input type="text" class="form-control " name="su_bank_acc_branch_name_coporate_sec[]"  value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4"  style="left: -6px;">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Bank Address </label>' +
                    '<input type="text" class="form-control " name="su_bank_address_coporate_sec[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<div class="form-group form-group-style required">' +
                    '<label>Swift code </label>' +
                    '<input type="text" class="form-control " name="su_bank_swift_code_coporate_sec[]" value = "">' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4"> ' +

                    '</div>' +
                    '</div>' +

                    ' </div>'
                $('#dynamic_field_coporate').append(cop_html);
            });


            $(document).on('click', '.btn_remove_cp', function () {
                var button_id = $(this).attr("id");
                $('#row_cp' + button_id + '').remove();
            });


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

        function show(aval) {
            if (aval == "2") {
                hiddenDiv.style.display = 'inline-block';
                Form.fileURL.focus();
            }
            else {
                hiddenDiv.style.display = 'none';
            }
        }

        window.reset = function (e) {
            e.wrap('<form>').closest('form').get(0).reset();
            e.unwrap();
        }

        $(document).ready(function () {
            var maxField = 10; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper
            var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button"><img src="remove-icon.png"/></a></div>'; //New input field html 
            var x = 1; //Initial field counter is 1

            //Once add button is clicked
            $(addButton).click(function () {
                //Check maximum number of input fields
                if (x < maxField) {
                    x++; //Increment field counter
                    $(wrapper).append(fieldHTML); //Add field html
                }
            });

            //Once remove button is clicked
            $(wrapper).on('click', '.remove_button', function (e) {
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                x--; //Decrement field counter
            });
        });

    </script>
@endsection