@extends('admin.layouts.master')
@section('content')
    <section class="section">
        <div class="container mt-5">
            <div class="row">
                <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-8 offset-xl-2">
                    <div class="card card-primary">
                        <div class="card-header">
                            <img src="{{ asset('collector/assets/img/logo.png') }}" class="img-responsive mx-auto">
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <h5>Assign Account</h5>
                            </div>
                            <form action="{{ route('admin.collector.assign.account.process', ['id' => request()->id]) }}"
                                method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-6 form-group ">
                                        <h5 class="mt-2">Account</h5>
                                        <select id="account" name="account" class="form-control" required>
                                            <option selected>Select Account</option>
                                            @foreach ($organizations as $organization)
                                                <option value="{{ $organization->id }}"
                                                    @if (!isset(request()->org)) {{ old('organization') ? old('organization') == $organization->id : 'selected' }} @endif>
                                                    {{ $organization->name }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('account'))
                                            <div class="text-danger">{{ $errors->first('account') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <h5 class="mt-2">Site</h5>
                                        <select name="site" class="form-control site" required>

                                        </select>
                                    </div>

                                </div>
                                <div class="form-group">
                                    <input type="hidden" id="collector_id" value="{{ request()->id }}">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                                        Assign
                                    </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>
<script>
    $(document).ready(function() {
        $("#account").on('change', function() {
            // alert();
            $.ajax({
                type: "GET",
                url: "{{ route('admin.accounts.for.collector') }}",
                data: {
                    'id': $(this).val(),
                    'collector_id': $('#collector_id').val()
                },
                success: function(response) {
                    $('.site').html($('<option>', {
                        value: '',
                        text: 'Select Site'
                    }));
                    if (response.length === 0) 
                    {
                        $('.site').html($('<option>', {
                        value: '',
                        text: 'No Site Available To Assign'
                    }));
                    }
                    $.each(response, function(i, e) {
                        $('.site').append($('<option>', {
                            value: e.id,
                            text: e.name
                        }));
                    });
                },
                error: function() {
                    alert(
                        'Something went wrong while getting organization data by id for organization code input'
                    );
                }
            });
        });
    })
</script>