@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">Create Invoice</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('sendInvoice')}}" 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]"
                                               name="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]"
                                               name="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]"
                                               name="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">
                                    </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]"
                                               value="2025-12-14" 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]" min="0"
                                               name="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"
                                                  class="ckeditor-color"></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>
                                    <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> Save
                                    </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> Save and Send
                                    </button>
                                </div>
                            </div>

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

        </div>
    </div>

@endsection

@section('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 () {

            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']
            });

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

            $('.image-form-save-only').on('click', function (e) {
                e.preventDefault();

                var formName = $(this).data('formname');
                var url = "