@extends('admins.layouts.main')
@section('tool')
{{--    <div class="page-header-actions">--}}
{{--        <a id="export_button" href="{{ $Urls['export'] }}" class="btn btn-sm btn-icon btn-primary btn-round waves-effect waves-classic" data-toggle="tooltip" data-original-title="匯出檔案">--}}
{{--            <i class="icon md-download" aria-hidden="true"></i>--}}
{{--        </a>--}}
{{--    </div>--}}
@endsection
@section('content')
    <link href="{{ asset('/js/admins/global/jquery-ui-1.12.1/jquery-ui.css') }}" rel="stylesheet" type="text/css"></link>
    <link rel="stylesheet" href="{{ asset('/js/admins/global/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css') }}">
    <script src="{{ asset('/js/admins/global/jquery-ui-1.12.1/jquery-ui.js') }}"></script>
    <script src="{{ asset('/js/admins/global/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js') }}"></script>
    <div class="panel panel-bordered">
        <form id="From" method="get" class="form-horizontal" enctype="multipart/form-data">
            <div class="alert-light alert-dismissible alert-check">
                <div class="row">
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">縣市區域:</label>
                            <div class="col-md-4">
                                {{--                            <div class="example-wrap">--}}
                                <select id="place_city_id" class="form-control" name="s_place_city_id">
                                    <option value="all" {{ $sPlaceCityId == 'all' ? 'selected' : null }}>全部</option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city->id }}" {{ $sPlaceCityId == $city->id ? 'selected' : null }}>{{ $city->name }}</option>
                                    @endforeach
                                </select>
                                {{--                            </div>--}}
                            </div>
                            <div class="col-md-4">
                                {{--                            <div class="example-wrap">--}}
                                <select id="place_town_id" class="form-control" name="s_place_town_id">
                                    <option value="0" >鄉鎮區域</option>
                                    @foreach($placeTown as $town)
                                        <option value="{{ $town->id }}" {{ $sPlaceAreaId == $town->id ? 'selected' : null }}>{{ $town->name }}</option>
                                    @endforeach
                                </select>
                                {{--                            </div>--}}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label ">關鍵字：</label>
                            <div class="col-md-8 ">
                                <input type="text" class="form-control" name="s_keyword" id="s_keyword"
                                       placeholder="" autocomplete="off" value="{{$sKeyword}}"
                                />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label"></label>
                            <div class="col-md-8" style="text-align: right">
                                <button type="button" onclick="resetUrl()" class="btn btn-warning">重設</button>
                                <button type="submit" class="btn btn-primary" value="">搜尋</button>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">場所類型:</label>
                            <div class="col-md-4">
                                <select id="place_main_type" class="form-control" name="place_type_id">
                                    <option value="all" {{ $sPlaceTypeId == 'all' ? 'selected' : null }}>全部</option>
                                    @foreach($mainPlaceTypes as $placeType)
                                        <option value="{{ $placeType->id }}" {{ $sPlaceTypeId == $placeType->id ? 'selected' : null }}>{{ $placeType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select id="place_sub_type_id" class="form-control" name="place_sub_type_id">
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    @can('createAedPlace', App\Models\Place::class)
                    <a href="{{$Urls['createAedPlaceApply']}}" class="btn btn-primary waves-effect waves-classic"><i class="icon md-plus" aria-hidden="true"></i>新增場所</a>
                    @endcan
                        <div>
                            <h3 class="panel-title">{{$title}}</h3>
                        </div>
                        <div class="example table-responsive">
                            <table class="table table-hover dataTable table-striped w-full jsgrid">
                                <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>申請表id</th>
                                    <th>場所名稱</th>
                                    <th>狀態</th>
                                    <th>初次送出時間</th>
                                    <th>更新時間</th>

                                </tr>
                                </thead>
                                <tbody>
                                @foreach($placeApplys as $placeApply)
                                    @if (!empty($placeApply->delPlaceId))
                                        
                                    @continue
                                        
                                    @endif
                                    <tr>
                                        <td>
                                            @if(!is_null($placeApply->edit_url))
                                                <a href="{{ $placeApply->edit_url }}" class="btn btn-success"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>
                                            @endif
                                            <a href="{{$placeApply->show_url}}" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>檢視</a>
                                        </td>
                                        <td>{{$placeApply->id}}</td>
                                        <td>{{$placeApply->place_name}}</td>
                                        <td>{{$placeApply->status_chinese}}</td>
                                        <td>{{$placeApply->created_at}}</td>
                                        <td>{{$placeApply->updated_at}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                </div>
            </div>
        </div>
    </div>
{{--    <div class="col-lg-12">--}}
{{--        {!! $paginate !!}--}}
{{--    </div>--}}
    <script>
        var subPlaceTypes = @json($subPlaceTypes);
        var towns = @json($towns);
        var areaId = "{{ $sPlaceAreaId ?? 0 }}";
        var placeSubTypeId = "{{ $sPlaceSubTypeId ?? 0 }}";

        var datetimepickerParams = {
            dateFormat: 'yy-mm-dd',
            changeYear: true,
            changeMonth: true,
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
            showTimepicker: false,
        };




        $(document).ready(function () {

            placeTypeObject = $('#place_sub_type_id');
            areaObject = $('#area_id');
            placeTownObject = $('#place_town_id');

            //日期插件
            $('.SUBDATE').datetimepicker(datetimepickerParams);

            //切換場所類型
            $('#place_main_type').change(function(){

                var place_main_type = $(this).val();
                option = '';

                //組合html
                $.each(subPlaceTypes[place_main_type], function( index, object) {
                    option += `<option value="${object.id}">${object.name}</option>`;
                });

                placeTypeObject.empty();
                placeTypeObject.append(option);
            }).change();


            //切換縣市
            $('#city_id, #place_city_id').change(function(){

                let targetObject = areaObject;

                if($(this).attr('id') == 'place_city_id'){
                    targetObject = placeTownObject;
                }


                var city_id = $(this).val();
                option = '<option value="0">鄉鎮市區</option>';

                //組合html
                $.each(towns[city_id], function( index, object) {
                    option += `<option value="${object.id}">${object.name}</option>`;
                });

                targetObject.empty();
                targetObject.append(option);
            });

            //切換鄉鎮
            $('#area_id, #place_town_id').change(function(){

                //如果為第二步驟的選擇鄉鎮不需要後續動作
                if($(this).attr('id') == 'place_town_id'){
                    return false;
                }

                var area_id = $(this).val();

                if(empty(area_id)){
                    return false;
                }

                var params = {
                    'area_id':area_id
                }

                $.post(getPlaceByAreaIdUrl, params, function(response){
                    option = '<option value="0">請選擇場所</option>';

                    //組合html
                    $.each(response, function(index, object) {
                        option += `<option value="${object.id}">${object.name}</option>`;
                    });

                    placeObject.empty();
                    placeObject.append(option);

                }, 'json');
            });


            $('#city_id').trigger( "change" );
            $('#place_city_id').trigger( "change" );
            //如果有areaId則下拉是選單選中對應項目
            if(areaId > 0){
                placeTownObject.find(`option[value='${areaId}']`).attr('selected', true);
            }

            //如果有placeSubTypeId則下拉是選單選中對應項目
            if(placeSubTypeId > 0){
                placeTypeObject.find(`option[value='${placeSubTypeId}']`).attr('selected', true);
            }
        });
    </script>
@endsection