@extends('layouts.app-admin')
@section('title',trans('admin_default.area'))
@section('content')


<div class="content-wrapper">
    <div class="panel panel-white border-top-success">
        <div class="panel-heading">
            <h5 class="panel-title text-bold">
                <i class="icon-location3 position-left"></i>
                {{trans('admin_default.area')}}
            </h5>
        </div>

        <div class="panel-body">
        
            <button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-area-modal" style="margin-top: 10px;">
                <i class="icon-add position-left"></i> 
                {!! trans('admin_default.add_new') !!}
            </button>

            <form class="main-search col-sm-3" method="POST" action="{{ url('/area/listing') }}" style="margin: 10px 0; padding-left: 0;">
                {!! csrf_field() !!}
                <div class="input-group input-group-sm">
                    <input  type="text" value="{{$search_text}}" name="search" 
                            maxlength="50" 
                            class="form-control" placeholder="Search...">
                    <span class="input-group-btn bg-success">
                        <button class="btn btn-primary" title="Search" data-popup="tooltip">
                            <i class="icon-search4"></i>
                        </button>
                    </span>
                </div>
            </form>

            <div>
                <table class="table table-bordered table-framed">
                    <thead>
                        <tr>
                            <th width="50px">#</th>
                            <th>{{trans('admin_default.country_name')}}</th>
                            <th>{{trans('admin_default.province_name')}}</th>
                            <th>{{trans('admin_default.city_name')}}</th>
                            <th>{{trans('admin_default.area_code')}}</th>
                            <th>{{trans('admin_default.area_name')}}</th>
                            <th width="10%">{{trans('admin_default.status')}}</th>
                            <th width="10%">{{trans('admin_default.action')}}</th>
                        </tr>
                    </thead>

                    <tbody>
                    @foreach( $data as $key => $value )
                        <tr>
                            <td>{{$key+1}}</td>
                            <td>{{$value->con_name}}</td>
                            <td>{{$value->p_name}}</td>
                            <td>{{$value->c_name}}</td>
                            <td>{{$value->code}}</td>
                            <td>{{$value->name}}</td>
                            <td class="text-center">
                                {!! getStateButton(
                                        $value->id,
                                        $value->state, 
                                        url('/area/update-state'), 
                                        $can_edit) !!}
                            </td>
                            <td class="text-center">
                                @if($can_edit || $can_delete)
                                    <ul class="icons-list">
                                        <li class="dropdown">
                                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-menu9"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown-menu-right">
                                                <li>
                                                    @if($can_edit)
                                                        <a 
                                                            href="#" 
                                                            data-toggle="modal" 
                                                            data-target="#edit-area-modal" 
                                                            data-id="{{$value->id}}" 
                                                            data-city-id="{{$value->city_id}}" 
                                                            data-province-id="{{$value->p_id}}" 
                                                            data-country-id="{{$value->con_id}}" 
                                                            data-code="{{$value->code}}" 
                                                            data-name="{{$value->name}}" 
                                                            class="btn-edit">
                                                            <i class="icon-pencil7"></i> {{trans('admin_default.edit')}}
                                                        </a>
                                                    @endif
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                @if(count($data))
                    <div class="clearfix"></div>
                    @include('elements.paginate')
                @endif
            </div>
        </div>

    </div>
</div>

<form id="hidden-form" action="" method="POST" style="display: none;">
    {!! csrf_field() !!}
    <input type="hidden" id="hidden-form-id" name="hidden_form_id" value="">
    <input type="hidden" id="hidden-form-state" name="hidden_form_state" value="0">
</form>

@include('areas.modal')

@endsection

@section('script')
<script type="text/javascript">
$(function(){

    // edit button
    $('.btn-edit').click(function(){
        var me = $(this),
            id = me.data('id'),
            city_id = me.data('city-id'),
            code = me.data('code'),
            name = me.data('name');
        $('#edit-hidden-id').val(id);
        var modal  = $('div#edit-area-modal');
        modal.find('input#edit-code').val(code);
        modal.find('input#edit-name').val(name);
        modal.find('input#hidden_city_id').val(city_id);
        getCityByID(city_id, modal);
    });

    // confirm
    $('a#yes-confirm').click(function(e){
        e.preventDefault();
        $('form#hidden-form').submit();
    });

    // country changes
    $('select.select-country').change(function(){
        var me = $(this),
            id = me.val(),
            modal = me.closest('div.area-modal');
        modal.find('input#hidden_province_id').val('');
        modal.find('input#hidden_city_id').val('');
        countryChange(id, modal);
        provinceChange(0, modal);
    });

    // onchange
    function countryChange(id, modal){
        var select_province = modal.find('.select-province'),
            select_city = modal.find('.select-city');
        var url    = "{!! url('/province/ajax-listing') !!}";
        var get_country = $('input#hidden_country_id').val(),
            get_province = $('input#hidden_province_id').val();
        $.ajax({
            url     : url,
            data    : { id:id },
            type    : 'GET',
            beforeSend: function(){
                select_province.html("<option> loading ... </option>");
            },
            success: function( response ){
                if( response.status == true ){
                    var data = response.data;
                    var str = "";
                    var text = "{{trans('admin_default.select_province')}}";
                    select_province.html("");
                    select_province.attr({"required":"required"});
                    select_province
                        .append($("<option></option>")
                        .attr("value","")
                        .text(text)); 
                    $.each(data, function(index, value){
                        if(value['id'] == get_province)
                        {
                            select_province
                                .append($("<option></option>")
                                .attr({"value":value['id'], "selected":"selected"})
                                .text(value['name'])); 
                        }else
                        {
                            select_province
                                .append($("<option></option>")
                                .attr({"value":value['id']})
                                .text(value['name'])); 
                        }
                    });
                    // provinceChange(get_province, modal);

                }
            },
            error: function( err, msg ){
                console.log(err);
            }
        });
    };


    // country changes
    $('select.select-province').change(function(){
        var me = $(this),
            id = me.val(),
            modal = me.closest('div.area-modal');
        provinceChange(id, modal);
    });

    // onchange
    function provinceChange(id, modal){
        var select_city = modal.find('.select-city');
        var url    = "{!! url('/city/ajax-listing') !!}";
        var get_city = $('input#hidden_city_id').val();
        $.ajax({
            url     : url,
            data    : { id:id },
            type    : 'GET',
            beforeSend: function(){
                select_city.html("<option> loading ... </option>");
            },
            success: function( response ){
                // console.log(response);
                if( response.status == true ){
                    var data = response.data;
                    var str = "";
                    var text = "{{trans('admin_default.select_city')}}";
                    select_city.html("");
                    select_city.attr({"required":"required"});
                    select_city
                        .append($("<option></option>")
                        .attr("value","")
                        .text(text)); 
                    $.each(data, function(index, value){
                        if(value['id'] == get_city)
                        {
                            select_city
                                .append($("<option></option>")
                                .attr({"value":value['id'], "selected":"selected"})
                                .text(value['name'])); 
                        }else
                        {
                            select_city
                                .append($("<option></option>")
                                .attr({"value":value['id']})
                                .text(value['name'])); 
                        }
                    });
                }
            },
            error: function( err, msg ){
                console.log(err);
            }
        });
    };

    // function get city by province id
    function getCityByID(city_id, modal){

        var url_city = "{!! url('/city/detail') !!}";
        $.ajax({
            url: url_city,
            data: { id:city_id },
            type: 'GET',
            success: function( city_info ){
                if(city_info.status == true){
                    var c_info = city_info.data,
                        province_id = c_info.province_id;
                    modal.find('input#hidden_province_id').val(province_id);
                    modal.find('select.select-province').val(province_id);
                    provinceChange(province_id, modal);
                    getProvinceByID(province_id, modal);
                }
            },
            error: function( err, msg ){
                console.log(err);
            }
        });

    }

    // function get province by country id
    function getProvinceByID(province_id, modal){
        var url_province = "{!! url('/province/detail') !!}";
        $.ajax({
            url: url_province,
            data: { id: province_id },
            type: 'GET',
            success: function( province_info ){
                if(province_info.status == true){
                    var p_info = province_info.data,
                        country_id = p_info.country_id;
                    modal.find('input#hidden_country_id').val(country_id);
                    modal.find('select.select-country').val(country_id);
                    countryChange(country_id, modal);
                }
            },
            error: function( err, msg ){
                console.log(err);
            }
        });
    };

});
</script>
@endsection