@extends('layouts.app')

@section('content')
    <div class="wrapper">
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>Invoices</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="breadcrumb-item active">Invoices</li>
                            </ol>
                        </div>
                    </div>
                </div><!-- /.container-fluid -->
            </section>

            <!-- Main content -->
            <section class="content">
                <div class="container">
                    <div class="row">
                        <!-- left column -->
                        <div class="col-md-12">
                            <!-- general form elements -->
                            <div class="card card-primary p-4">
                                <div class="card-header">
                                    <h3 class="card-title">Add New Invoice</h3>
                                </div>
                                <!-- /.card-header -->
                                <!-- form start -->
                                <form action="{{ route('leads.store') }}" method="POST" id="form-validate">
                                    @csrf
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="fname">First Name</label>
                                                    <input type="text" class="form-control" id="fname" name="fname"
                                                        placeholder="Enter First Name">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="lname">Last Name</label>
                                                    <input type="text" class="form-control" id="lname" name="lname"
                                                        placeholder="Enter Last Name">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="email">Email address</label>
                                                    <input type="email" class="form-control" id="email" name="email"
                                                        placeholder="Enter Email">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="phonenumber">Phone Number</label>
                                                    <input type="text" class="form-control" id="phonenumber"
                                                        name="phonenumber" placeholder="Enter Phone Number">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="zipcode">Zipcode</label>
                                                    <input type="text" class="form-control" id="zipcode" name="zipcode"
                                                        placeholder="Enter Zipcode">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="address">Address</label>
                                                    <input type="text" class="form-control" id="address" name="address"
                                                        placeholder="Enter Address">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="currency">Select Currency</label>
                                                    <select name="currency" id="currency" class="form-control ">
                                                        <option></option>
                                                        @foreach ($currency as $curr)
                                                            <option value="{{ $curr->curr_type }}">
                                                                {{ $curr->curr_type }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="label-control">Brand</label>
                                                    <select name="brand" id="brand" value="{{ old('brand') }}"
                                                        class="form-control select2">
                                                        <option></option>
                                                        @forelse ($brands as $brand)
                                                            <option value="{{ $brand->b_url }}">{{ $brand->b_name }}
                                                            </option>
                                                        @empty
                                                        @endforelse
                                                    </select>
                                                </div>
                                            </div>
                                            {{-- <div class="col-md-6">
                        <div class="form-group">
                          <label for="currency">Select Brand</label>
                          <select name="brand" id="brand" class="form-control">
                            <option></option>
                            <option value="https://www.ghostwritingfounder.com/">Ghostwriting Founder</option>
                            <option value="https://www.logospots.com/">Logospots</option>
                            <option value="https://www.wiki-pros.com/">Wiki Pros</option>
                            <option value="https://www.getyourlogo.co.uk/">GetYourLogo</option>
                            <option value="https://www.thewebfounders.com/">TheWebFounders</option>
                            <option value="https://www.astrosdigital.com/">AstrosDigital</option>
                            <option value="https://www.logovalley.co.uk/">LogoValley.uk</option>
                            <option value="https://www.websitevalley.co.uk/">WebSitevalley.uk</option>
                            <option value="https://www.bookwritingfounders.com/">BookWritingFounders</option>
                            <option value="https://www.logoshutter.com/">LogoShutter</option>
                            <option value="https://www.logodogo.com/">LogoDogo</option>
                            {{-- <option value="https://www.astrosdigital.co.uk/">AstrosDigital.UK</option> --}}
                                            {{-- </select>
                        </div>
                      </div> --}}
                                        </div>
                                        <div class="field_wrapper">
                                            <div class="row">
                                                <input type="hidden" class="form-control" name="package_amount"
                                                    value="other" required>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="amount">Amount</label>
                                                        <input type="number" class="form-control" step=".01" name="amount"
                                                            placeholder="Enter Amount" id="amount_1" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="description">Description</label>
                                                        <textarea required name="description" id="description" cols="10" rows="3" class="form-control"></textarea>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.card-body -->

                                    <div class="card-footer">
                                        <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                        <a href="{{ route('leads.index') }}"><button type="button"
                                                class="btn btn-danger">Cancel</button></a>
                                    </div>
                                </form>
                            </div>
                            <!-- /.card -->


                        </div>
                        <!--/.col (left) -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </section>
            @if (isset($urlarray))
                <br>
                <section class="content">
                    <div class="container-fluid">

                        <div class="text-center">
                            <h2 style="color: green">URL GENERATED</h2>
                        </div>

                        @for ($i = 0; $i < count($urlarray); $i++)
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="input-group mb-3">
                                        <input type="text" value="{{ $urlarray[$i]['url'] }}" id="{{ $i }}"
                                            class="form-control">
                                        <div class="input-group-append">
                                            <button class="input-group-text copylink" data-id="{{ $i }}"><i
                                                    class="fas fa-copy"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
        </div>
        </section>
        {{-- <div>
    <input type="text" value="{{$url}}" id="myInput" class="form-control">
    <button onclick="myFunction()">Copy text</button>
    </div> --}}
        @endif
        <!-- /.content -->
    </div>

    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
    </div>
    <!-- ./wrapper -->
@endsection

@section('afterScript')
    <script>
        $(document).ready(function() {
            $('#brand').select2({
                placeholder: "Select Brand"
            });
            $('#currency').select2({
                placeholder: "Select Currency"
            });
            $('#package_amount').select2();

            $('#form-validate').validate({
                rules: {
                    fname: {
                        required: true,
                    },
                    lname: {
                        required: true,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    phonenumber: {
                        required: true,
                    },
                    zipcode: {
                        required: true,
                    },
                },
                messages: {
                    fname: {
                        required: "Please enter First name",
                    },
                    lname: {
                        required: "Please enter Last name",
                    },
                    email: {
                        required: "Please enter Email Address",
                        email: "Please enter a valid Email Address"
                    },
                    phonenumber: {
                        required: "Please enter Phone Number",
                    },
                    zipcode: {
                        required: "Please enter Zipcode",
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                    $(element).addClass('is-valid');
                }
            });



            var x = 1; //Initial field counter is 1
            var maxField = 10; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper
            // var fieldHTML = '<div class="remo"><div class="row mt-4"><div class="col-md-5"><div class="form-group"><select class="form-control package" name="package_amount" id="'+x+'"><option>Select Package</option><option value="499">Silver Plan $499</option><option value="799">Gold Plan $799</option><option value="999">Platinum Plan$999</option><option value="1299">Diamond Plan $1299</option><option value="other">Other</option></select></div></div><div class="col-md-5"><div class="form-group"><input type="number" class="form-control discount" data-discount="'+x+'" id="discount_'+x+'" name="discount_amount" placeholder="Enter discount amount"></div></div><div class="col-md-5"><input type="number" class="form-control" name="amount" id="amount_'+x+'" placeholder="Enter Amount" required disabled></div> <div class="col-md-5"><input type="text" class="form-control" name="description" placeholder="Enter Description" required></div><div class="col-md-2"><a href="javascript:void(0);" class="remove_button btn btn-danger"><i class="fa fa-minus-circle"></i></a></div></div>'; //New input field html

            //Once add button is clicked
            $(addButton).click(function() {
                //Check maximum number of input fields
                if (x < maxField) {
                    x++; //Increment field counter
                    $(wrapper).append(
                        '<div class="remo"><div class="row mt-4"><div class="col-md-5"><div class="form-group"><select class="form-control package" name="package_amount" id="' +
                        x +
                        '"><option>Select Package</option><option value="499">Silver Plan $499</option><option value="799">Gold Plan $799</option><option value="999">Platinum Plan$999</option><option value="1299">Diamond Plan $1299</option><option value="other">Other</option></select></div></div><div class="col-md-5"><div class="form-group"><input type="number" class="form-control discount" data-discount="' +
                        x + '" id="discount_' + x +
                        '" name="discount_amount" placeholder="Enter discount amount"></div></div><div class="col-md-5"><input type="number" class="form-control" name="amount" id="amount_' +
                        x +
                        '" placeholder="Enter Amount" required readonly></div> <div class="col-md-5"><input type="text" class="form-control" name="description" placeholder="Enter Description" required></div><div class="col-md-2"><a href="javascript:void(0);" class="remove_button btn btn-danger"><i class="fa fa-minus-circle"></i></a></div></div>'
                    ); //Add field html
                }
            });

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

            $(document).on('keyup', '.discount', function() {
                var discount = $(this).attr('data-discount');
                var value = $(this).val();
                var amount = $('#' + discount).val();
                if (amount != "other") {
                    var discountedValue = Math.floor(amount - value);
                    $('#amount_' + discount).val(discountedValue);
                }

            });

            $(document).on('click', '.copylink', function() {
                var copyText = $(this).attr('data-id');
                var text = document.getElementById(copyText);
                // alert(text);
                text.select();
                text.setSelectionRange(0, 99999)
                document.execCommand("copy");
                Swal.fire({
                    position: 'top-end',
                    icon: 'success',
                    title: 'Successfully Copied',
                    showConfirmButton: false,
                    timer: 700
                });
            });
        });
    </script>
@endsection