@extends('layouts.mainlayout')
@section('title', 'Organisation')
@section('main')
<!-- Form validation -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-tree5 font-weight-bold"> Create/Edit Organisation</h5>
    </div>
    <div class="card-body">
        @if(isset($organisation) != null)
            <form class="form-validate-jquery" id="organisation-form" action="{{ route('organisation.update', $organisation->id) }}"
                method="POST" enctype="multipart/form-data">
                <input type="hidden" name="_method" value="PATCH"/>
        @else
            <form class="form-validate-jquery" id="organisation-form" action="{{ route('organisation.store') }}" method="POST"
                    enctype="multipart/form-data">
        @endif

            @csrf
            <fieldset class="mb-3">
                <legend class="text-uppercase font-size-sm font-weight-bold"> Organisation</legend>
                <!-- Basic text input -->
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">Add Organisation <span class="text-danger"></span></label>
                    <div class="col-lg-9">
                        <input type="text" name="organisation" class="form-control" required placeholder="Organisation Name"
                               @if(isset($organisation) != null) value="{{$organisation->organisation}}" autofocus @endif />
                    </div>
                    <label class="col-form-label col-lg-3">Organisation Address<span class="text-danger"></span></label>
                    <div class="col-lg-9">
                        <input type="text" name="address" class="form-control" required placeholder="Organisation Address"
                                @if(isset($organisation) != null) value="{{$organisation->address}}" @endif />
                    </div>
                    <!-- New Organisation Shortcode Field -->
                    <label class="col-form-label col-lg-3">Organisation Shortcode <span class="text-danger"></span></label>
                    <div class="col-lg-9">
                        <input type="text" id="OrgShortCode" name="OrgShortCode" class="form-control" required placeholder="Organisation Shortcode"
                        @if(isset($organisation)) 
                            value="{{ old('OrgShortCode', $organisation->OrgShortCode) }}" readonly 
                        @endif />
                        
                        <!-- Error message container -->
                        <div id="shortcode-error" class="text-danger" style="display:none;"></div>
                    </div>
                </div>

                <div class="form-group row">
                    <label  for='image' class="col-form-label col-lg-3">Add Logo<span class="text-danger">*</span></label>
                     <div class="col-lg-9">
                        <input type="file" name="image"/>
                             @if ($errors->has('image'))
                              <div class="text-danger">{{ $errors->first('image') }}</div>
                             @endif
                    </div>
                </div> 
                @if(isset($organisation) != null)
                    @if(isset($organisation) && $organisation->image)
                        <div class="form-group row">
                            <div class="col-lg-9">
                                @php
                                    // Add a cache-busting parameter to the image URL
                                    $imageUrl = URL::to('storage/' . $organisation->image) . '?timestamp=' . now()->timestamp;
                                @endphp
                                <img src="{{ $imageUrl }}" alt="" height="32" width="206">
                            </div>
                        </div>
                    @endif
                @endif

                <!-- /basic text input -->
            </fieldset>
            <div class="d-flex justify-content-end align-items-center">
                <button type="submit" class="btn btn-primary ml-3" id="pnotify-desktop-default">@if(isset($organisation) != null) {{ 'Update' }} @else
                          {{ 'Save' }} @endif<i class="icon-paperplane ml-2"></i></button>
            </div>
        </form>
    </div>
</div>

<!-- /form validation -->

@endsection
<script>
document.addEventListener('DOMContentLoaded', function() {
    const orgShortCodeInput = document.getElementById('OrgShortCode');
    const errorContainer = document.getElementById('shortcode-error');

    // Set the field to read-only if the organisation exists
    if (orgShortCodeInput.value) {
        orgShortCodeInput.readOnly = true;
    }

    orgShortCodeInput.addEventListener('input', function() {
        const orgShortCode = orgShortCodeInput.value.trim();

        // Clear previous error message
        errorContainer.style.display = 'none';
        errorContainer.textContent = '';

        // Check if the input is exactly 3 characters long
        if (orgShortCode.length !== 3) {
            errorContainer.textContent = 'Shortcode must be exactly 3 characters long.';
            errorContainer.style.display = 'block';
            return; // Exit if the length is invalid
        }

        // Check if the shortcode contains only letters
        const isValidFormat = /^[A-Za-z]+$/.test(orgShortCode);
        if (!isValidFormat) {
            errorContainer.textContent = 'Shortcode must contain only letters.';
            errorContainer.style.display = 'block';
            return; // Exit if the format is invalid
        }

        // Fetch existing shortcodes from the API
        fetch(`http://190.92.175.27:3000/api/employeeOrg`)
            .then(response => response.json())
            .then(data => {
                // Check if the shortcode exists in the orgIdentifiers array
                if (data.orgIdentifiers && Array.isArray(data.orgIdentifiers)) {
                    // Use Set to filter duplicates
                    const uniqueIdentifiers = [...new Set(data.orgIdentifiers)];
                    const exists = uniqueIdentifiers.includes(orgShortCode);

                    if (exists) {
                        errorContainer.textContent = 'Cannot use already used shortcode. Please use a different name.';
                        errorContainer.style.display = 'block';
                    }
                }
            })
            .catch(error => console.error('Error fetching data:', error));
    });

    // Validate on form submission
    document.querySelector('#organisation-form').addEventListener('submit', function(event) {
        const orgShortCode = orgShortCodeInput.value.trim();
        
        if (orgShortCode.length !== 3) {
            errorContainer.textContent = 'Shortcode must be exactly 3 characters long.';
            errorContainer.style.display = 'block';
            event.preventDefault(); // Prevent form submission
        } else if (!/^[A-Za-z]+$/.test(orgShortCode)) {
            errorContainer.textContent = 'Shortcode must contain only letters.';
            errorContainer.style.display = 'block';
            event.preventDefault(); // Prevent form submission
        }
    });
});
</script>