@extends('layouts.app')
@section('title', 'Regions | Website')
@section('extrastyles')
@endsection

@section('content')
    <div class="studio98_websters">
        <div class="studio98_websters" >
            <div class="ibox float-e-margins">
                <div class="ibox-title2">
                    <h5>{{$region->name}}</h5>
                    @if($client->isEnabled() == false)
                    <div class="pull-right">
                        <a class="btn btn-primary region-locale-btn" href="javascript:void(0);" data-toggle="modal" data-target="#create_region_locale">
                            Add Region Locales
                        </a>
                    </div>
                        @endif
                </div>
                <div class="ibox-content p-md">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    <div class="table-responsive">
                        <div class="clearfix"></div>
                        <table class="table table-striped table-bordered table-hover" id="region_state_listing">
                            <thead>
                            <tr>
                                <th>Country</th>
                                <th>State</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($regionStates as $key => $regionState)
                                <tr>
                                    <td>
                                        {{ optional(optional($regionState->country)->country)->title}}
                                        <br />
                                        <div class="actions">
                                            <a href="javascript:void(0)" onclick="deleteRegionState({{$regionState->id}})">Delete</a>
                                        </div>
                                    </td>
                                    <td>{{$regionState->state_name}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal fade" id="create_region_locale" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                {!! Form::open(['id' => 'form','novalidate' => 'novalidate' , 'onsubmit' => 'return saveStateRegion();']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add Locale</h4>
                </div>
                <div class="modal-body">
                    @include('Product::region.detail.form')
                    <div class="state-regions"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Set Locale</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(document).ready(function() {
            allSatesEvent();

            $('.region-locale-btn').click(function () {
                $('#create_region_locale').find('select').trigger('change');
            });

            $('.countries-select').change(function () {
                const countryId = $(this).find("option:selected").val();
                if(countryId) {
                    $.ajax({
                        method: 'GET',
                        url: '{{ ecommerce_url('region/country/')}}/'+countryId,
                        data : 'region_id=' + '{!! $region_id !!}'
                    }).done(function(data) {
                        $('.state-regions').html(data);
                        allSatesEvent();
                    });
                }
            });
        });

        function saveStateRegion() {
            return reloadAjaxSubmit('create_region_locale',"{{ ecommerce_url('region/locale')}}",'country','Set Locale');
        }

        function allSatesEvent() {
            $('#all-states').change(function () {
                if(this.checked) {
                    $(".check-state").prop("checked", true);
                }else{
                    $(".check-state").prop("checked", false);
                }
            });
        }

        function deleteRegionState(id) {
            if(confirm('Are you sure you want to delete this item?')) {
                $.ajax({
                    method: 'POST',
                    url: '{{ ecommerce_url('region/state-delete/')}}',
                    data: 'id='+id+'&_token='+csrf_token,
                }).done(function() {
                    location.reload();
                });
            }
        }

    </script>

@endsection