@extends('master')
@section('content')
    <section class="section">
        @include('admin.layout.breadcrumbs', [
            'title' => __('Add User'),
            'headerData' => __('Users'),
            'url' => 'app-user',
        ])

        <div class="section-body">
            <div class="row">
                <div class="col-lg-8">
                    <h2 class="section-title"> {{ __('Add User') }}</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form method="post" action="{{ url('app-user') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-12">
                                        <h2>Personal Information</h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3 d-flex align-items-center justify-content-center">
                                        <div class="form-group center">
                                            <label>{{ __('Image') }}</label>
                                            <div id="image-preview" class="image-preview">
                                                <label for="image-upload" id="image-label"> <i
                                                        class="fas fa-plus"></i></label>
                                                <input type="file" name="image" id="image-upload" />
                                            </div>
                                            @error('image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Name') }}</label>
                                                    <input type="text" name="name" placeholder="{{ __('Name') }}"
                                                        value="{{ old('name') }}"
                                                        class="form-control @error('name')? is-invalid @enderror">
                                                    @error('name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Last Name') }}</label>
                                                    <input type="text" name="last_name" placeholder="{{ __('Last Name') }}"
                                                        value="{{ old('last_name') }}"
                                                        class="form-control @error('last_name')? is-invalid @enderror">
                                                    @error('last_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Whatsapp') }}</label>
                                                    <input type="text" name="whatsapp" placeholder="{{ __('Whatsapp') }}"
                                                        value="{{ old('whatsapp') }}"
                                                        class="form-control @error('whatsapp')? is-invalid @enderror">
                                                    @error('whatsapp')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Phone') }}</label>
                                                    <input type="text" name="phone" placeholder="{{ __('Phone') }}"
                                                        value="{{ old('phone') }}"
                                                        class="form-control @error('phone')? is-invalid @enderror">
                                                    @error('phone')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Email') }}</label>
                                                    <input type="email" name="email" placeholder="{{ __('Email') }}"
                                                        value="{{ old('email') }}"
                                                        class="form-control @error('email')? is-invalid @enderror">
                                                    @error('email')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Address') }}</label>
                                                    <input type="text" name="address" placeholder="{{ __('Address') }}"
                                                        value="{{ old('address') }}"
                                                        class="form-control @error('address')? is-invalid @enderror">
                                                    @error('address')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('City') }}</label>
                                                    <input type="text" name="city" placeholder="{{ __('City') }}"
                                                        value="{{ old('city') }}"
                                                        class="form-control @error('city')? is-invalid @enderror">
                                                    @error('city')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Country') }}</label>
                                                    <select name="country" class="form-control select2" id="country">
                                                        <option value="">{{ __('Select Country') }}</option>
                                                    </select>
                                                    @error('country')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Date Of Birth') }}</label>
                                                    <input type="date" name="dob" placeholder="{{ __('Date Of Birth') }}"
                                                        value="{{ old('dob') }}"
                                                        class="form-control @error('dob')? is-invalid @enderror">
                                                    @error('dob')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Designation') }}</label>
                                                    <input type="text" name="designation" placeholder="{{ __('Designation') }}"
                                                        value="{{ old('designation') }}"
                                                        class="form-control @error('designation')? is-invalid @enderror">
                                                    @error('designation')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Gender') }}</label>
                                                    <select name="gender" class="form-control select2">
                                                        <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>
                                                            {{ __('Male') }}</option>
                                                        <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>
                                                            {{ __('Female') }}</option>
                                                    </select>
                                                    @error('gender')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label id="id-label">{{ __('CNIC') }}</label>
                                                    <input type="number"
                                                        name="cnic"
                                                        id="id-input"
                                                        placeholder="{{ __('CNIC') }}"
                                                        value="{{ old('cnic') }}"
                                                        class="form-control @error('cnic') is-invalid @enderror">

                                                    @error('cnic')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Password') }}</label>
                                                    <input type="password" name="password"
                                                        placeholder="{{ __('Password') }}"
                                                        class="form-control @error('password')? is-invalid @enderror">
                                                    @error('password')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ __('Status') }}</label>
                                                    <select name="status" class="form-control select2">
                                                        <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>
                                                            {{ __('Active') }}</option>
                                                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>
                                                            {{ __('Block') }}</option>
                                                    </select>
                                                    @error('status')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <h2>Organisational Information</h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Organization Name') }}</label>
                                            <input type="text" name="organization_name" placeholder="{{ __('Organization Name') }}"
                                                value="{{ old('organization_name') }}"
                                                class="form-control @error('organization_name')? is-invalid @enderror">
                                            @error('organization_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Organization Email') }}</label>
                                            <input type="email" name="organization_email" placeholder="{{ __('Organization Email') }}"
                                                value="{{ old('organization_email') }}"
                                                class="form-control @error('organization_email')? is-invalid @enderror">
                                            @error('organization_email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Business Type') }}</label>
                                            <input type="text" name="business_type" placeholder="{{ __('Business Type') }}"
                                                value="{{ old('business_type') }}"
                                                class="form-control @error('business_type')? is-invalid @enderror">
                                            @error('business_type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Organization Type') }}</label>
                                            <select name="organization_type_id" class="form-control select2">
                                                <option value="">{{ __('Select Organization Type') }}</option>
                                                @foreach ($organization_type as $type)
                                                    <option value="{{ $type->id }}" {{ old('organization_type_id') == $type->id ? 'selected' : '' }}>
                                                    {{ $type->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('organization_type_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Organization Phone 1') }}</label>
                                            <input type="text" name="organization_phone_1" placeholder="{{ __('Organization Phone 1') }}"
                                                value="{{ old('organization_phone_1') }}"
                                                class="form-control @error('organization_phone_1')? is-invalid @enderror">
                                            @error('organization_phone_1')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Organization Phone 2') }}</label>
                                            <input type="text" name="organization_phone_2" placeholder="{{ __('Organization Phone 2') }}"
                                                value="{{ old('organization_phone_2') }}"
                                                class="form-control @error('organization_phone_2')? is-invalid @enderror">
                                            @error('organization_phone_2')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Organization Address') }}</label>
                                            <input type="text" name="organization_address" placeholder="{{ __('Organization Address') }}"
                                                value="{{ old('organization_address') }}"
                                                class="form-control @error('organization_address')? is-invalid @enderror">
                                            @error('organization_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>{{ __('Business Website') }}</label>
                                            <input type="text" name="business_website" placeholder="{{ __('Business Website') }}"
                                                value="{{ old('business_website') }}"
                                                class="form-control @error('business_website')? is-invalid @enderror">
                                            @error('business_website')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <h2>Purpose Of Registration</h2>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>{{ __('Registration Reason') }}</label>
                                            <input type="text" name="registration_reason" placeholder="{{ __('Registration Reason') }}"
                                                value="{{ old('registration_reason') }}"
                                                class="form-control @error('registration_reason')? is-invalid @enderror">
                                            @error('registration_reason')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary demo-button">{{ __('Submit') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            $.get("https://restcountries.com/v3.1/all?fields=name,flags", function (countries) {
                let countryOptions = countries
                    .sort((a, b) => a.name.common.localeCompare(b.name.common))
                    .map(country => {
                        return {
                            id: country.name.common,
                            text: country.name.common,
                            flag: country.flags.svg
                        };
                    });

                $('select[name="country"]').select2({
                    data: countryOptions,
                    templateResult: function (state) {
                        if (!state.id) return state.text;
                        return $(
                            `<span><img src="${state.flag}" width="20" style="margin-right:5px"/>${state.text}</span>`
                        );
                    },
                    templateSelection: function (state) {
                        if (!state.id) return state.text;
                        return $(
                            `<span><img src="${state.flag}" width="20" style="margin-right:5px"/>${state.text}</span>`
                        );
                    },
                    escapeMarkup: function (markup) {
                        return markup;
                    }
                });
            });
        });
        $(document).ready(function() {
            $('#country').on('change', function() {
                let selectedCountry = $(this).val();
                let label = $('#id-label');
                let input = $('#id-input');

                if (selectedCountry === 'Pakistan') {
                    label.text('CNIC');
                    input.attr('placeholder', 'CNIC');
                    input.attr('name', 'cnic');
                    input.attr('type', 'number');
                } else {
                    label.text('Passport');
                    input.attr('placeholder', 'Passport');
                    input.attr('name', 'passport');
                    input.attr('type', 'text');
                }
            });
        });
    </script>
@endpush