@extends('Login-Layout')

@section('title', 'تسجيل الدخول | شركاء مبيت')

@section('content')

    <div class="form">
        <div class="card-sigin">
            <div class="card-brand mb-3">
                <a href="{{front_page()}}">
                    <img src="{{asset('assets/images/brand/mabeet-logo.png')}}" class="sign-favicon-a ht-40" alt="logo">
                </a>
            </div>

            <div class="card-sigin">
                <div class="main-signup-header">
                    <h2>أهلا بك شريك مبيت!</h2>
                    <h5 class="fw-semibold mb-4">برجاء ادخال بياناتك لتسجيل الدخول</h5>

                    @include('Messages')

                    <div class="panel panel-primary tabs-style-1">
                        <div class=" tab-menu-heading">
                            <div class="tabs-menu1">
                                <!-- Tabs -->
                                <ul class="nav panel-tabs main-nav-line">
                                    <li class="nav-item"><a href="#tab1" class="nav-link {{request()->get('error-form') == '' ? 'active' : ''}}" data-bs-toggle="tab"><i class="si si-user"></i><span class="text">تسجيل الدخول</span></a></li>
                                    <li class="nav-item"><a href="#tab2" class="nav-link {{request()->get('error-form') == 'request' ? 'active' : ''}}" data-bs-toggle="tab"><i class="si si-home"></i><span class="text">اضف عقار جديد</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div
                            class="panel-body tabs-menu-body main-content-body-right border-top-0 p-0">
                            <div class="tab-content">
                                <div class="tab-pane {{request()->get('error-form') == '' ? 'active' : ''}}" id="tab1">
                                    <form action="{{route('partner.login')}}" method="POST">
                                        @csrf

                                        <div class="form-group mt-4">
                                            <label for="username-login">رقم الجوال أو البريد الإلكتروني</label>

                                            <div class="input-group">
                                                <span class="input-group-text" id="username-login-addon"><i class="si si-user"></i></span>
                                                <input type="text" id="username-login" name="username" class="form-control" placeholder="المستخدم" />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="login-password">كلمة المرور</label>

                                            <div class="input-group">
                                                <span class="input-group-text" id="login-password-addon"><i class="si si-lock"></i></span>
                                                <input id="login-password" type="password" class="form-control" placeholder="كلمة المرور" name="password" />
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-main-primary btn-block">تسجيل الدخول</button>

                                        <a href="#" class="d-block text-center mt-2">نسيت كلمة المرور؟</a>
                                    </form>
                                </div>

                                <div class="tab-pane {{request()->get('error-form') == 'request' ? 'active' : ''}}" id="tab2">
                                    <form id="request-form" method="post" action="{{partner_route('units.request.store')}}" enctype="multipart/form-data">
                                        @csrf

                                        @include('Admin.Units.UnitForm')
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <!-- JQuery min js -->
    <script src="{{asset('assets/back/plugins/jquery/jquery.min.js')}}"></script>
    <script src="{{asset('assets/back/plugins/select2/js/select2.min.js')}}"></script>

    <!-- Bootstrap Bundle js -->
    <script src="{{asset('assets/back/plugins/bootstrap/js/popper.min.js')}}"></script>
    <script src="{{asset('assets/back/plugins/bootstrap/js/bootstrap.min.js')}}"></script>

    <script src="{{asset('js/perfectscroll.min.js')}}"></script>

    <script>

        $('.select2').select2();

        checkAssociation($('input[name="association"]:checked').val());

        $('input[name="association"]').on('change', function (){
            checkAssociation($(this).val());
        })

        function checkAssociation(val){
            if(val === 'yes') {
                $('#contract-container').show()
                $('#booking-container').hide()

                $('.contract-input').attr('required', true)
                $('.booking-input').attr('required', false)
            }else {
                $('#contract-container').hide()
                $('#booking-container').show()

                $('.contract-input').attr('required', false)
                $('.booking-input').attr('required', true)
            }
        }

        $('input[type="file"]').on('change', function (){
            $(this).parents('.form-group').find('.field-warning').hide()
        });

        // changeCity($('#province_id').val());

        $('body').on('change', '#province_id', function (){
            changeCity($(this).val())
        })

        function changeCity(val) {
            let city_url = '{{partner_route('get.all.cities', ':id')}}';

            city_url = city_url.replace(':id', val)

            $('#city_id').select2({
                placeholder: '',
                allowClear: true,
                ajax: {
                    url: city_url,
                    processResults: function (data) {
                        return {
                            results: data.data
                        };
                    }
                }
            });
        }

        $('body').on('change', '#sector_id', function (){
            changeBeach($(this).val())
        })

        function changeBeach(val) {
            let beach_url = '{{partner_route('get.all.beaches', ':id')}}';

            beach_url = beach_url.replace(':id', val)

            $('#beach_id').select2({
                placeholder: '',
                allowClear: true,
                ajax: {
                    url: beach_url,
                    processResults: function (data) {
                        return {
                            results: data.data
                        };
                    }
                }
            });
        }

        $('.has-error input').on('keydown', function (){
            const parent = $(this).parents('.form-group');

            parent.removeClass('has-error')
            parent.find('.text-danger').hide()

            $('.alert.alert-danger').hide()
        })
    </script>
@endsection