@extends('layouts.app')
@section('content')
    @php
        use App\Helpers\RouteHelper;
    @endphp

    @include(RouteHelper::getSidebarView())


    <main id="" class="side_user">
        <!-- Hero -->
        <div class="bg-body-light ">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">


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

        <!-- END Hero -->
        <div class="content">
            <div class="block block-rounded">
                <div class="block-header">
                    <h4 class="block-title ">Add Projects</h4>
                </div>
                <div class="block-content block-content-full">
                    <div class="loader" id="loader" style="display: none;">
                        <div class="external-shadow">
                            <div class="central">
                                <div class="intern"></div>
                            </div>
                        </div>
                    </div>
                    <form action="{{ route('projects.store') }}" method="POST">
                        @csrf
                        @method('POST')
                        <!-- name -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Name of Project</h6>
                            <input type="text" name="name" maxlength="255" minlength="3" required
                                value="{{ old('name') }}" class="form-control form-control-lg" placeholder="Enter Name" />
                        </div>
                        @error('name')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <!-- customer -->
                        <div class="form-group mb-4 col-8 ">
                            <h6 for="type"> Customer</h6>
                            <select name="customer_id" class="form-control" required id="customer-select">
                                <option value="">Select a Customer</option>
                                @foreach ($customers as $key => $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- customer user -->
                        <div class="form-outline mb-4 col-8">
                            <h6 for="type"> Customer user</h6>
                            <select name="customer_user_id" class="form-control" required id="customer-user-select">
                                <option value="">Select a Customer User</option>
                            </select>
                        </div>
                        <!-- total qr -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Total QR to create</h6>
                            <input type="number" name="total_qr_count" value="{{ old('total_qr_count') }}" required
                                class="form-control form-control-lg" placeholder="Total QR" />
                        </div>
                        @error('total_qr_count')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror


                        <!-- function type -->
                        <div class="form-group mb-4 col-8 ">
                            <h6 for="type"> Function Type</h6>
                            <select name="function_type" class="form-control" required>
                                <option value="">Select a Function</option>
                                <option value="0">Map to any function</option>
                                <option value="1">Scan to Call</option>
                                <option value="2">Scan to SMS</option>
                                <option value="3">Scan to Mail</option>
                                <option value="4">URL</option>
                                <option value="5">Text</option>
                                <option value="6">Whatsapp</option>
                                <option value="7">Wi-Fi</option>
                                <option value="8">Emergency Contact</option>
                                <option value="9">Lost and Found</option>
                                <option value="10">Contact</option>
                                <option value="11">Storage Label</option>
                            </select>
                        </div>


                        <!-- default url -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Default URL</h6>
                            <input type="text" name="default_url" value="{{ old('default_url') }}" required
                                class="form-control form-control-lg" placeholder="Default URL" />
                        </div>
                        @error('default_url')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <!-- description -->
                        <div class="form-outline mb-4 col-8">
                            <h6> Description</h6>
                            <textarea name="description" id="" class="form-control"></textarea>
                        </div>
                        @error('description')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <div class="form-group pt-2">
                            <a href="{{ Route('projects.index') }}"><button type="button"
                                    class="backbtn">Back</button></a>
                            <button type="submit" id="submitted" class="addbtn">Submit</button>
                        </div>
                    </form>


                </div>
            </div>
        </div>
        </div>
    </main>
@endsection
{{-- @section('script') --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {

        $('#customer-select').change(function() {
            var customerId = $(this).val();

            if (customerId) {
                $.ajax({
                    url: '/get-customer-users/' + customerId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {

                        $('#customer-user-select').empty();
                        $('#customer-user-select').append(
                            '<option value="">Select a Customer User</option>');
                        $.each(data, function(key, value) {
                            $('#customer-user-select').append('<option value="' +
                                value.id + '">' + value.name + '</option>');
                        });
                    },
                    error: function(jqXHR, textStatus, errorThrown) {

                    }
                });
            } else {
                $('#customer-user-select').empty();
                $('#customer-user-select').append('<option value="">Select a Customer User</option>');
            }
        });
    });
</script>


{{-- @endsection --}}