@extends('layouts.app')

@section('content')
    <br>
    <section class="content">

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">بيانات العقار</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                    {{-- <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
                        <i class="fas fa-times"></i>
                    </button> --}}
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-8 order-2 order-md-1">
                        <div class="row">
                            <div class="col-12 col-sm-4">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-center text-muted">رقم العقار</span>
                                        <span class="info-box-number text-center text-muted mb-0">{{ $details->id }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-center text-muted">اسم العقار</span>
                                        <span class="info-box-number text-center text-muted mb-0">{{ $details->name }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-center text-muted">اسم صاحب العقار</span>
                                        <span class="info-box-number text-center text-muted mb-0">
                                            <span class='badge badge-primary'><i class='fa fa-user'></i>
                                                {{ $details->createdBy->full_name }}</span>
                                            <span class='badge badge-light'><i class='fa fa-phone'></i>
                                                {{ $details->createdBy->country_code . $details->createdBy->contact_no }}</span>
                                            <span class='badge badge-success'>
                                                رقم صاحب العقار# {{ $details->createdBy->id }}
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </section>

    <div class="content px-3">

        @include('common.errors')

        <div class="card">

            {!! Form::open(['route' => ['update-city-zone', $details->id], 'files' => true]) !!}

            <div class="card-body">
                {{-- <div class="row">
                    @include('tbl_property_details.fields')

                </div> --}}
                <div class="row">
                    <div class="form-group col-sm-6">
                        {!! html()->label('cities :', 'cities') !!}
                        {!! Form::select('tbl_city_id', $cities, $details->tbl_city_id, ['class' => 'form-control', 'id' => 'city']) !!}
                    </div>
                    <div class="form-group col-sm-6">
                        {!! html()->label('zones :', 'zones') !!}
                        {!! Form::select('tbl_zone_id', [], null, ['class' => 'form-control', 'id' => 'zones', 'disable' => 'disable']) !!}
                    </div>
                </div>
            </div>

            <div class="card-footer">
                {!! html()->submit('Save')->class('btn btn-primary') !!}
                <a href="{{ URL::previous() }}" class="btn btn-default">
                    @lang('crud.cancel')
                </a>
            </div>

            {{-- {!! html()->form()->close() !!} --}}

        </div>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript">
        var zone = "{{ $details->tbl_zone_id }}"
        console.log(zone);
        getZone($('#city').val())
        function getZone(valueCity) {
            $.ajax({
                type: "GET",
                url: "/getZones/" + valueCity,
                dataType: "json",
                success: function(response) {
                    console.log(response);
                    var options = '<option value="">Select a zone</option>';
                    $.each(response, function(index, value) {
                        if(zone == index){
                            options += '<option selected value="' + index + '">' + value + '</option>';
                        }else {
                            options += '<option value="' + index + '">' + value + '</option>';
                        }
                    });
                    $('#zones').html(options).prop('disabled', false);
                }
            });
        }

        $('#city').change(function(e) {
            getZone(this.value);
        });
    </script>
@endpush