@extends('layouts.master')
@section('contain')
    <!-- Page titles -->
    <div class="row page-titles">
        <!-- Title based on whether you're updating or adding a industry -->
        <div class="col-md-5 align-self-center">
            @if (isset($industry))
                <h4 class="card-title">Update Industry</h4>
            @else
                <h4 class="card-title">Add Industry</h4>
            @endif
        </div>
        <div class="col-md-7 align-self-center text-end">
            <!-- Breadcrumbs -->
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li class="breadcrumb-item active"><a class="text-cyan" href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active"><a class="text-cyan"
                            href="{{ Route('industry.index') }}">Industries</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <!-- End Page titles -->

    <!-- news_feed Form -->
    <div class="card">
        <div class="card-body">
            <h4 class="card-title"></h4>
            @if (isset($industry))
                <!-- Form for updating an existing industry -->
                <form id="industry-create-Form" method="POST" action={{ Route('industry.update', $industry->id) }}
                    enctype="multipart/form-data" data-parsley-validate>
                    @csrf
                    @method('PUT')
                @else
                    <!-- Form for adding a new industry -->
                    <form id="industry-create-Form" action="{{ Route('industry.add') }}" method="POST"
                        enctype="multipart/form-data" data-parsley-validate>
                        @csrf
            @endif
            <div class="row">
                <div class="form-group col-md-6 ">
                    <label class="font-bold">Name*</label>
                    <!-- Input for the description -->
                    <input id="industry-input" required data-parsley-required-message="name field is required"
                        data-parsley-maxlength="150" data-parsley-maxlength-message="name must not exceed 150 characters"
                        type="text" name="name" value="{{ $industry->name ?? old('name') }}"
                        class="form-control @error('name') is-invalid @enderror" placeholder="Enter name">
                        <input type="hidden" id="industry-input-id" value="{{ $industry->id ?? '' }}">
                    <div id="industryError" class="error-message " style="color: #ff7f50;"></div>
                    @error('name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

            </div>
            <div class="form-group col-md-12">
                <!-- Submit button -->
                @if (isset($industry))
                    <button type="submit" class="btn btn-info me-2 text-white">Update</button>
                @else
                    <button type="submit" class="btn btn-success me-2 text-white">Submit</button>
                @endif
            </div>
            </form>
        </div>
    </div>



    <script>
        $(document).ready(function() {
            $('#industry-create-Form').submit(function(event) {
                event.preventDefault();
                var nameInput = $('#industry-input');
                var idInput = $('#industry-input-id'); // Corrected ID selector
                var errorContainer = $('#industryError');
                var isNameValid = true;

                var name = nameInput.val();
                var id = idInput.val(); // Corrected ID value retrieval

                $.ajax({
                    type: 'POST',
                    url: '{{ route('checkUnique.industry') }}',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'name': name,
                        'id': id
                    },
                    success: function(response) {
                        alert(response.available);
                        if (response.available === false) {
                            errorContainer.html('The name is already taken.');
                            isNameValid = false;
                        } else {
                            // If the name is available, submit the form
                            $('#industry-create-Form').off('submit').submit();
                        }
                    }
                });
            });
        });
    </script>
@endsection