@extends('collector.layouts.master')
@section('content')
    <style>
        #upload {
            display: none;
        }

        .card .card-header {
            background: #fff;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: white;
        }

        label {
            color: white !important;
        }

        .card {

            box-shadow: 0px 10px 20px 0px !important;

        }

    </style>
    <style>
        .card .card-header {
            background: #fff;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: white;
        }

        label {
            color: white !important;
        }

        .card {
            background: transparent;
            box-shadow: 0px 10px 20px 0px !important;
        }

        .text-small {
            color: white;
        }

        a {
            color: #fff
        }

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        #upload {
            display: none;
        }



        li {
            color: white;
        }

    </style>
    <section class="section">
        <div class="container mt-5">
            <div class="row">
                <div class="col-12 ">
                    <div class="card card-primary">
                        <div class="card-header">
                            <img src="{{ asset('user/assets/img/logo.png') }}" class="img-responsive mx-auto">
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <h5>Email</h5>
                            </div>
                            <br>
                            <form action="{{ route('collector.pemail.process') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label for="name">Name</label>
                                        <input id="name" type="text" class="form-control" name="name" value="">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="email">Email</label>
                                        <input id="email" type="text" class="form-control" name="email"
                                            value="{{ old('email') }}" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="email">Account</label>
                                        <select class="form-control" name="org" id="org" required>
                                            <option value="" selected disabled>Select Account</option>
                                            @foreach ($organizations as $organization)
                                                <option value="{{ $organization->id }}"
                                                    {{ old('org') == $organization->id ? 'selected' : '' }}>
                                                    {{ $organization->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>URL</label><br />
                                        <input id="url" class="form-control" readonly>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label>QR Code</label>
                                        <div id="qrCode"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                                        Send
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
@push('scripts')
    <script>
        $("#org").on('change', function() {
            $.ajax({
                type: "GET",
                url: "{{ route('collector.organization.by.id') }}",
                data: {
                    'id': $(this).val()
                },
                success: function(response) {
                    $("#url").val("{{route('client.form')}}?orgCode="+response.organization.org_code);
                    $('#qrCode').html(response.qr_code)
                },
                error: function() {
                    alert(
                        'Something went wrong while getting Account data by id for Account code input'
                    );
                }
            });
        });
    </script>
@endpush