@extends('employer.layouts.app')
@section('content')
@component('employer.layouts.partials.breadcrumbs', ['breadcrumbs' => $breadcrumbs])
@endcomponent
<div class="row">
    <div class="col-md-12 stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title"> Create Business</h6>
                <form id="businessForm" method="POST" action="{{ route('employer.business.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Business Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @if ($errors->has('name')) is-invalid @endif" name="name" value="{{ old('name') }}" placeholder="Enter Business Name" required>
                                <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                            </div>
                        </div><!-- Col -->

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Description<span class="text-danger">*</span></label>
                                <!-- <select class="form-control" id="file_type" name="file_type">
                                    <option value="0">--SELECT--</option>

                                </select> -->
                                <textarea name="description" class="form-control @if ($errors->has('description')) is-invalid @endif" cols="30" rows="5" required>{{ old('description') }}</textarea>

                                <div class="invalid-feedback">{{ $errors->first('description') }}</div>
                            </div>
                        </div><!-- Col -->
                    </div><!-- Row -->

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="control-label">Country <span class="text-danger">*</span></label>
                                <select class="form-control" name="country" id="country" value="{{ old('country') }}" required>
                                    <option  value="">--Choose Country--</option>
                                    @foreach ($country as $key => $value )
                                    <option value="{{ $value['id'] }}">{{ $value['name']}}</option>
                                    @endforeach
                                </select>

                                <div class="invalid-feedback">{{ $errors->first('country') }}</div>
                               
                            </div>
                        </div><!-- Col -->

                        <div class="col-sm-4" style="display: none;" id="bank_div">
                            <div class="form-group">
                                <label class="control-label">Bank <span class="text-danger">*</span></label>
                                <select class="form-control" name="bank" id="bank" value="{{ old('bank') }}" required>
                                </select>

                                <div class="invalid-feedback">{{ $errors->first('bank') }}</div>
                            </div>
                        </div><!-- Col -->
                        <!-- Message if no banks are available -->
                        <div class="col-sm-12" id="no_banks_message" style="display: none;">
                            <p class="alert alert-warning">No banks are available for the selected country. You cannot proceed without selecting a bank.</p>
                        </div>

                    </div><!-- Row -->


                    <div class="row" id="bank_details" style="display: none;" style="{{ ($errors->has('company_name') || $errors->has('account_number') || $errors->has('batch_no')) ? 'display: block;' : 'display: none;' }}">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="control-label">Bank Account Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control @if ($errors->has('company_name')) is-invalid @endif" name="company_name" id="company_name" value="{{ old('company_name') }}" placeholder="Enter Company Name" required>
                                <div class="invalid-feedback">{{ $errors->first('company_name') }}</div>
                            </div>
                        </div><!-- Col -->

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="control-label">Account Number<span class="text-danger">*</span></label>
                                <input type="number" class="form-control @if ($errors->has('account_number')) is-invalid @endif" name="account_number" id="account_number" value="{{ old('account_number') }}" placeholder="Enter Account Number" required>
                                <div class="invalid-feedback">{{ $errors->first('account_number') }}</div>
                            </div>
                        </div><!-- Col -->

                        <div class="col-sm-4" id="wbc_details" style="display: none;">
                            <div class="form-group">
                                <label class="control-label">At least one Batch No. registered with WBC</label>
                                <input type="text" class="form-control @if ($errors->has('batch_no')) is-invalid @endif" name="batch_no" id="batch_no" value="{{ old('batch_no') }}" placeholder="Enter Batch No">
                                <div class="invalid-feedback">{{ $errors->first('batch_no') }}</div>
                            </div>
                        </div><!-- Col -->

                    </div><!-- Row -->


                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Flexible Minutes before work Start Time:</label>
                                <input type="number" class="form-control @if ($errors->has('range_from')) is-invalid @endif" name="range_from" id="range_from" value="{{ old('range_from') }}" placeholder="Enter Range From">
                                <div class="invalid-feedback">{{ $errors->first('range_from') }}</div>
                            </div>
                        </div><!-- Col -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Flexible Minutes after work Start Time:</label>
                                <input type="number" class="form-control @if ($errors->has('range_to')) is-invalid @endif" name="range_to" id="range_to" value="{{ old('range_to') }}" placeholder="Enter Range To">
                                <div class="invalid-feedback">{{ $errors->first('range_to') }}</div>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary submit">Submit</button>
                </form>

            </div>
        </div>
    </div>
</div>
@endsection
@push('custom_js')
<script src="{{ asset('admin_assets/vendors/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('admin_assets/js/tinymce.js') }}"></script>
<script src="{{ asset('admin_assets/js/bank_data.js') }}"></script>
<!-- <script>
    $(document).ready(function() {
        $('#country').change(function() {
            let countryId = $(this).val();

            if (countryId) {
                // Make an AJAX request to check available banks for the selected country
                $.ajax({
                    url: '{{ route("employer.business.getBanks") }}',
                    type: 'GET',
                    data: { country_id: countryId },
                    success: function(response) {
                        let bankDiv = $('#bank_div');
                        let bankSelect = $('#bank');
                        let noBanksMessage = $('#no_banks_message');
                        bankSelect.empty();

                        if (response.banks.length > 0) {
                            // Populate banks and hide no bank message
                            noBanksMessage.hide();
                            bankDiv.show();
                            bankSelect.append('<option value="">--Select Bank--</option>');
                            $.each(response.banks, function(index, bank) {
                                bankSelect.append('<option value="' + bank.id + '">' + bank.name + '</option>');
                            });
                        } else {
                            // Show no banks message and hide bank dropdown
                            noBanksMessage.show();
                            bankDiv.hide();
                        }
                    }
                });
            } else {
                // Hide both bank dropdown and message if no country is selected
                $('#bank_div').hide();
                $('#no_banks_message').hide();
            }
        });
    });
</script> -->
<script>
$(document).ready(function() {
    $('#country').change(function() {
        let countryId = $(this).val();
        console.log("Selected country ID:", countryId);

        if (countryId) {
            $.ajax({
                url: '{{ route("employer.business.getBanks") }}',
                type: 'GET',
                data: { country_id: countryId },
                dataType: 'json',
                success: function(response) {
                    console.log("AJAX response:", response);
                    let bankDiv = $('#bank_div');
                    let bankSelect = $('#bank');
                    let noBanksMessage = $('#no_banks_message');
                    bankSelect.empty();

                    if (response.banks && response.banks.length > 0) {
                        noBanksMessage.hide();
                        bankDiv.show();
        -                bankSelect.append('<option value="">--Select Bank--</option>');-
                        $.each(response.banks, function(index, bank) {
                            bankSelect.append('<option value="' + bank.id + '">' + bank.name + '</option>');
                        });
                    } else {
                        noBanksMessage.show().text(response.message || 'No banks available for this country.');
                        bankDiv.hide();
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error: " + status + "\nError: " + error);
                    console.log("Response Text: " + xhr.responseText);
                    alert("An error occurred while fetching banks. Please try again.");
                }
            });
        } else {
            $('#bank_div').hide();
            $('#no_banks_message').hide();
        }
    });
});

// Athulya 29-10-2024
  // Show bank details if there are validation errors
  if ('{{ $errors->any() }}') {
        $('#bank_details').show();
    }

</script>


@endpush