@extends('admin.auth.layouts.app')
@push('css')
    <link href="{{ asset('admin/assets/plugins/global/telinput/intlTelInput.css') }}" rel="stylesheet" type="text/css" />
@endpush
@section('title','Login')
@section('content')
<!--begin::Root-->
<div class="d-flex flex-column flex-root" id="kt_app_root">
    <!--begin::Page bg image-->
    <style>
    body {
        background-image: url('{{ asset('admin/assets/media/auth/bg10-dark.jpeg') }}');
    }

    [data-theme="dark"] body {
        background-image: url('{{ asset('admin/assets/media/auth/bg10-dark.jpeg') }}');
    }
    </style>
    <!--end::Page bg image-->
    <!--begin::Authentication - Sign-in -->
    <div class="d-flex flex-column flex-lg-row flex-column-fluid">
        <!--begin::Aside-->
        <div class="d-flex flex-lg-row-fluid">
            <!--begin::Content-->
            <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                <!--begin::Image-->
                <img class="theme-light-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                    src="{{ asset('admin/logo.png') }}" style="border-radius: 5%" alt="TASAHL" />
                <!--end::Image-->
            </div>
            <!--end::Content-->
        </div>
        <!--begin::Aside-->
        <!--begin::Body-->
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
            <!--begin::Wrapper-->
            <div class="bg-body d-flex flex-center rounded-4 w-md-600px p-10">
                <!--begin::Content-->
                <div class="w-md-400px">
                    <!--begin::Form-->
                    <form class="form w-100" action="{{route('AdminLoginAction')}}" method="post"
                        data-kt-redirect-url="#" action="#">
                        @csrf
                        <!--begin::Heading-->
                        <div class="text-center mb-11">
                            <!--begin::Title-->
                            <h1 class="text-dark fw-bolder mb-3">Login to your account</h1>
                            <!--end::Title-->
                        </div>
                        <!--begin::Heading-->

                        <!--begin::Input group=-->
                        <div class="fv-row mb-8">
                            <!--begin::Phone-->
                            <input id="phone" type="number" class="form-control form-control-solid" placeholder="{{__('01001234567')}}" aria-label="{{__('mobile_number')}}" name="mobile" value="{{ old('mobile') }}">
                            <!--end::Phone-->
                        </div>
                        <!--end::Input group=-->
                        <div class="fv-row mb-3">
                            <!--begin::Password-->
                            <input type="password" placeholder="Password" name="password" autocomplete="off"
                                class="form-control form-control-solid" />
                            <!--end::Password-->
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Wrapper-->
                        <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
                            <div></div>
                            <!--begin::Link-->
                            {{--<a href="#" class="link-primary">Forget Password ?</a>--}}
                            <!--end::Link-->
                        </div>
                        <!--end::Wrapper-->
                        <!--begin::Submit button-->
                        <div class="d-grid mb-10">
                            <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Sign In</span>
                                <!--end::Indicator label-->
                                <!--begin::Indicator progress-->
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                <!--end::Indicator progress-->
                            </button>
                        </div>
                        <!--end::Submit button-->

                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Content-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Body-->
    </div>
    <!--end::Authentication - Sign-in-->
</div>
<!--end::Root-->
@endsection


@push('scripts')
{{--   new    --}}
<script src="{{ asset('admin/assets/plugins/global/telinput/intlTelInput.min.js') }}"></script>
<script>
    let telInput = $("#phone")

    // initialize
    telInput.intlTelInput({
        initialCountry: "sa",
        hiddenInput: "full_phone",
        width: '100%',
        preferredCountries: ['sa','eg'],
        autoPlaceholder: 'aggressive',
        formatOnDisplay: false,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/js/utils.js",
    });
</script>
<script>
    $("form").submit(function() {
        $("#country_code").val(($("#phone").intlTelInput("getSelectedCountryData").dialCode));
    });
</script>
@endpush