@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">
                    <!-- Add any content here if needed -->
                </div>
            </div>
        </div>

        <!-- END Hero -->
        <div class="content">
            <div class="block block-rounded">
                <div class="block-header">
                    <h4 class="block-title ">Show Project</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>

                        <!-- name -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Name of Project</h6>
                            <input type="text" name="name" maxlength="255" minlength="3" disabled
                                value="{{ old('name', $project->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" disabled id="customer-select">
                                <option value="">Select a Customer</option>
                                @foreach ($customers as $customer)
                                    <option value="{{ $customer->id }}"
                                        {{ $project->customer_id == $customer->id ? 'selected' : '' }}>{{ $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" disabled id="customer-user-select">
                                <option value="">Select a Customer User</option>
                                @foreach ($customerUsers as $customerUser)
                                    <option value="{{ $customerUser->id }}"
                                        {{ $project->customer_user_id == $customerUser->id ? 'selected' : '' }}>
                                        {{ $customerUser->name }}</option>
                                @endforeach
                            </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', $project->total_qr_count) }}" disabled
                                class="form-control form-control-lg" placeholder="Total QR" />
                        </div>
                        @error('total_qr_count')
                            <span class="text text-danger">{{ $message }}</span>
                        @enderror

                        <div class="form-group mb-4 col-8 ">
                            <h6 for="type"> Function Type</h6>
                            <select name="function_type" class="form-control" disabled>
                                <option value="">Select a Function</option>
                                <option value="0" {{ $project->function_type == 0 ? 'selected' : '' }}>Map to any
                                    function</option>
                                <option value="1" {{ $project->function_type == 1 ? 'selected' : '' }}>Scan to Call
                                </option>
                                <option value="2" {{ $project->function_type == 2 ? 'selected' : '' }}>Scan to SMS
                                </option>
                                <option value="3" {{ $project->function_type == 3 ? 'selected' : '' }}>Scan to Mail
                                </option>
                                <option value="4" {{ $project->function_type == 4 ? 'selected' : '' }}>URL</option>
                                <option value="5" {{ $project->function_type == 5 ? 'selected' : '' }}>Text</option>
                                <option value="6" {{ $project->function_type == 6 ? 'selected' : '' }}>Whatsapp
                                </option>
                                <option value="7" {{ $project->function_type == 7 ? 'selected' : '' }}>Wi-Fi</option>
                                <option value="8" {{ $project->function_type == 8 ? 'selected' : '' }}>Emergency
                                    Contact</option>
                                <option value="9" {{ $project->function_type == 9 ? 'selected' : '' }}>Lost and Found
                                </option>
                                <option value="10" {{ $project->function_type == 10 ? 'selected' : '' }}>Contact
                                </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', $project->default_url) }}" disabled
                                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="" disabled class="form-control">{{ old('description', $project->description) }}</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 class="row">
                <div class="col-sm-12">
                    {{-- @can('list customers', 'admin') --}}
                    <div class="table-responsive my-3">
                        {{ $dataTable->table() }}
                    </div>
                    {{-- @endcan --}}
                </div>
            </div>
        </div>
        </div>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Unlink</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{ route('unlink.qr.code') }}" method="POST">
                        @csrf

                        <div class="modal-body">
                            <input type="hidden" name="qr_code" id="qr_code">
                            <p>When a QR is unlinked from user the QR can be associated to a different user and will
                                disappear from here.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Confirm</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection

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


            $(document).on('click', '.unlink-qr-btn', function() {
                var qrCode = $(this).data('id');
                // alert(qrCode);
                $('#qr_code').val(qrCode);
                $('#exampleModal').modal('show');
            });



            // Fetch customer users when customer is selected
            $('#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) {
                            console.log('AJAX error:', textStatus, errorThrown);
                        }
                    });
                } else {
                    $('#customer-user-select').empty();
                    $('#customer-user-select').append('<option value="">Select a Customer User</option>');
                }
            });
        });
    </script>
@endsection