@extends('Partners.Layouts.Page')

@section('styles')
    <style>
        #send-request {
            margin-top: 3rem;
        }

        .store-image {
            max-width: 300px;
        }
    </style>
@endsection

@section('content')

    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route()}}">الرئيسية /</a></h4>
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route('units.index')}}">العقارات /</a></h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">{{$page_title}}</span>
            </div>
        </div>

        <div class="d-flex my-xl-auto right-content">
            <a href="{{partner_route('units.index')}}" class="btn btn-danger mb-1 me-1" data-toggle="tooltip"
               title="عرض العقارات">
                <span class="me-1">عرض العقارات</span>
                <i class="fa fa-angle-left"></i>
            </a>
        </div>
    </div>
    <!-- breadcrumb -->

    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">

                <div class="CARD-HEADER"></div>

                <div class="card-body p-5">
                    <div class="app-message text-center">
                        <h4 class="text-center mb-5">لاستكمال اضافة العقار برجاء تحميل التطبيق واتباع الخطوات.</h4>

                        <a href="https://apps.apple.com/sa/app/mabet-partner/id6449440876?l=ar" target="_blank"><img class="store-image" src="{{asset('images/app-store.png')}}" alt=""></a>
                        <a href="https://play.google.com/store/apps/details?id=tsi.mabet.mabet_partner" target="_blank"><img class="store-image" src="{{asset('images/google-play.png')}}" alt=""></a>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Row -->
    {{--    <div class="row row-sm">--}}
    {{--        <div class="col-lg-12">--}}
    {{--            <form method="post" action="{{$unit->exists ? partner_route('units.update', $unit->id) : partner_route('units.store')}}" enctype="multipart/form-data">--}}

    {{--                <div class="card">--}}
    {{--                    <div class="card-header">--}}
    {{--                        <h3 class="card-title">{{$page_title}}</h3>--}}
    {{--                    </div>--}}

    {{--                    <div class="card-body">--}}
    {{--                        @csrf--}}

    {{--                        @if($unit->exists)--}}
    {{--                            @method('PUT')--}}
    {{--                        @endif--}}

    {{--                        @include('Messages')--}}

    {{--                        <div class="row">--}}
    {{--                            <div class="col-md-6 col-xs-12">--}}
    {{--                                @include('Admin.Units.UnitForm')--}}
    {{--                            </div>--}}
    {{--                        </div>--}}

    {{--                    </div>--}}
    {{--                </div>--}}
    {{--            </form>--}}
    {{--        </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>
        $('.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