@extends('admin.layouts.app')
@section('panel')
    <div class="row mb-none-30">
        <div class="col-xl-12 col-lg-8 mb-30">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.supervisor.store', $user->id ?? NULL) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <!-- Image Uploader Section -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>@lang('Image')</label>
                                    <x-image-uploader image="{{ $user->image ?? NULL }}" class="w-100" type="supervisor"
                                        :required="false" />
                                </div>
                            </div>

                            <!-- Form Section -->
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>@lang('First Name')</label>
                                            <input class="form-control" type="text" name="firstname"
                                                value="{{ old('firstname', $user->firstname ?? NULL) }}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">@lang('Last Name')</label>
                                            <input class="form-control" type="text" name="lastname"
                                                value="{{ old('lastname', $user->lastname ?? NULL) }}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>@lang('Email')</label>
                                            @if ($user ?? false)
                                                <input class="form-control" type="email" value="{{ $user->email }}"
                                                    disabled>
                                            @else
                                                <input class="form-control" type="email" name="email"
                                                    value="{{ old('email') }}" required>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>@lang('Mobile Number')</label>
                                            <div class="input-group">
                                                <input type="text" class="input-group-text mobileCode px-2"  value="{{ old('mobile_code', $user->dial_code ?? NULL) }}" name="mobile_code" placeholder="@lang('Code')" required>
                                                <input type="hidden" name="country_code">
                                                <input type="number" name="mobile"
                                                    value="{{ old('mobile', $user->mobile ?? NULL) }}"
                                                    class="form-control checkUser" placeholder="@lang("Number")" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>@lang('Address')</label>
                                            <input class="form-control" type="text" name="address"
                                                value="{{ old('address', $user->address ?? NULL) }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-6">
                                        <div class="form-group">
                                            <label>@lang('City')</label>
                                            <input class="form-control" type="text" name="city"
                                                value="{{ old('city', $user->city ?? NULL) }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-6">
                                        <div class="form-group">
                                            <label>@lang('State')</label>
                                            <input class="form-control" type="text" name="state"
                                                value="{{ old('state', $user->state ?? NULL) }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-6">
                                        <div class="form-group">
                                            <label>@lang('Zip/Postal')</label>
                                            <input class="form-control" type="text" name="zip"
                                                value="{{ old('zip', $user->zip ?? NULL) }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-6">
                                        <div class="form-group">
                                            <label>@lang('Country')</label>
                                            <select name="country" class="form-control select2">
                                                @foreach ($countries as $key => $country)
                                                    <option data-mobile_code="{{ $country->dial_code }}"
                                                        value="{{ $country->country }}" data-code="{{ $key }}"
                                                        @selected(old('country', $user->country_name ?? NULL) == $country->country)>
                                                        {{ __($country->country) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit"
                                            class="btn btn--primary w-100 h-45">@lang('Submit')</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('breadcrumb-plugins')
@if(($user->id ?? NULL) && auth()->guard('admin')->user())
        <a href="{{ route('admin.supervisor.login', $user->id) }}" target="_blank" class="btn btn-sm btn-outline--primary">
            <i class="las la-sign-in-alt"></i>@lang('Login as Supervisor')
        </a>
    @endif
    <x-back route="{{ route('admin.supervisor.index') }}" />
@endpush


@push('style')
    <style>
        .mobileCode {
            width: 100px;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict"

            @if ($mobileCode)
                $(`option[data-code={{ $mobileCode }}]`).attr('selected', '');
            @endif

            $('select[name=country]').on('change', function() {
                $('input[name=country_code]').val($('select[name=country] :selected').data('code'));
                $('.mobile-code').text('+' + $('select[name=country] :selected').data('mobile_code'));
            });

            $('input[name=country_code]').val($('select[name=country] :selected').data('code'));
            $('.mobile-code').text('+' + $('select[name=country] :selected').data('mobile_code'));
        })(jQuery)
    </script>
@endpush
