@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')

        <section class="loc_pg section">
            <div class="container">
                <h2 class="sec_title bb text-center fw-bold mb-5">   {{ __('web.addresses') }}  </h2>
                <div class="col-lg-8 m-auto">
                    @if(count($locations) == 0)
                        <div class="alert alert-danger py-4 text-center my-5" role="alert">
                            {{__('web.not_exist_address')}}
                        </div>
                    @else
                        @foreach($locations as $key => $row)
                            <div class="loc_card">
                                <div class="heading in-flex">
                                    <div class="inFlex">
                                        <span class="icon-outer">
                                            <i class="fas fa-map-marker-alt"></i>
                                        </span>
                                        <h5 class="title mb-0"><b> {{__('web.address')}} {{$key + 1}}</b></h5>
                                    </div>
                                    <div class="butns inFlex justify-content-end">
                                        <button onclick="locationForm(this)" target-id="{{route('profile.location.edit',$row->id)}}" class="card_butn edit" data-bs-toggle="modal" data-bs-target="#addLocModal">{{__('web.edit')}}</button>
                                        <button onclick="deleteLocation(this)" target-id="{{route('profile.location.delete',$row->id)}}" class="card_butn delete">{{__('web.delete')}}</button>
                                    </div>
                                </div>
                                <div class="card-body inFlex">
                                    <span class="icon-outer">
                                        <i class="fad fa-home-lg-alt"></i>
                                    </span>
                                    <div class="content">
                                        <h6 class="country"> {{$row->city->currentDescription->name}}</h6>
                                        <p class="color-gray2 mb-0">{{$row->area->currentDescription->name}} - {{$row->address}}  </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    <button onclick="locationForm(this)" target-id="{{route('profile.location.create')}}" class="butn primary_butn m-auto mt-5" type="button" data-bs-toggle="modal" data-bs-target="#addLocModal">{{ __('web.add_new_location') }}</button>
                </div>
            </div>
        </section>

    </main>

    <div class="modal locModal fade" id="addLocModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body mt-3">
                    <div class="login_pg">
                        <div class="form_box" id="formAddress">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@section('inject_js')

    <script>
        function locationForm(elem)
        {
            let url = $(elem).attr('target-id');
            $.ajax
            ({
                url : url,
                type: 'GET',
                data: '',
                success:function(data)
                {
                    $('#formAddress').html(data)
                }
            })
        }
        function deleteLocation(elem)
        {
            let url = $(elem).attr('target-id');
            $.ajax
            ({
                url : url,
                type: 'GET',
                data: '',
                success:function(data)
                {
                    $(elem).closest('.loc_card').fadeOut(1000)
                }
            })
        }
    </script>

@endsection
@stop