@extends('backend.layouts.main')

@section('content')

    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{$subtitle}}</h3>
        </div>
        <div class="col-md-7 align-self-center">
            {{ Breadcrumbs::render('backend.products.image.index') }}
        </div>

        <div class="col-md-12">
            <div class="card card-outline-info">
                <div class="card-body">
                    @if(auth()->guard('backend')->user()->can('products.add'))
                        <div class="row">
                            <div class="col-md-2 pull-right">
                                <a href="{{Route('backend.products.add')}}"
                                   class="btn waves-effect waves-light btn-block btn-info">
                                    <i class="fa fa-plus"></i>&nbsp;&nbsp;Thêm dự án mới
                                </a>
                            </div>
                        </div>
                    @endif

                    <form action="" method="get" id="form-filter">
                        <div class="form-body">
                            <div class="row p-t-20">

                                <div class="col-md-12">
                                    @include('backend.partials.msg')
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label" for="province_id">Tỉnh/TP</label>
                                        <select class="form-control select_province select2 form-control-sm"
                                                style="width: 100%; height:36px;" name="province_id">
                                            <option value="">Tất cả</option>
                                            @foreach($provinces as $province)
                                                <option value="{{$province->id}}"
                                                        {!! request('province_id')==$province->id?'selected="selected"':'' !!}
                                                >{{$province->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label" for="district_id">Quận/Huyện</label>
                                        <select class="form-control  select_district select2" name="district_id">
                                            <option value="">Tất cả</option>
                                            @foreach($districts as $districts)
                                                <option value="{{$districts->id}}"
                                                        {!! request('district_id')==$districts->id?'selected="selected"':'' !!}>{{$districts->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label" for="ward_id">Phường/Xã</label>
                                        <select class="form-control select_ward select2" name="ward_id">
                                            <option value="">Tất cả</option>
                                            @foreach($wards as $ward)
                                                <option value="{{$ward->id}}"
                                                        {!! request('ward_id')==$ward->id?'selected="selected"':'' !!}>{{$ward->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label" for="street_id">Tên đường</label>
                                        <select class="form-control select_street select2" name="street_id">
                                            <option value="">Tất cả</option>
                                            @foreach($streets as $street)
                                                <option value="{{$street->id}}"
                                                        {!! request('street_id')==$street->id?'selected="selected"':'' !!}>{{$street->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="control-label" for="home_number">Số nhà</label>
                                        <input type="text"
                                               name="home_number"
                                               value="{{request('home_number')}}"
                                               id="home_number"
                                               class="form-control" placeholder="Số nhà">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="control-label">Hiện trạng</label>
                                        <select class="form-control"
                                                name="status">
                                            <option value="">Tất cả</option>
                                            @foreach($status as $st)
                                                <option value="{{$st['id']}}"
                                                        {!! request('status')==$st['id']?'selected="selected"':'' !!}>{{$st['name']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="control-label">Trạng thái</label>
                                        <select class="form-control"
                                                name="status_censorship">
                                            <option value="">Tất cả</option>
                                            @foreach($censorship as $st)
                                                @if($st['id']==1)
                                                    @php continue; @endphp
                                                @endif;
                                                <option value="{{$st['id']}}"
                                                        {!! request('status_censorship')==$st['id']?'selected="selected"':'' !!}>{{$st['name']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="control-label">Số record</label>
                                        <select class="form-control"
                                                name="limit">
                                            @foreach($_limits as $st)
                                                <option value="{{$st}}"
                                                        {!! $filter['limit']==$st?'selected="selected"':'' !!}>{{number_format($st)}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="btn-group" role="group" style="display: inherit">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fa fa-search"></i>Tìm
                                        </button>

                                        <a title="Clear search"
                                           href="{{Route('backend.products.index')}}"
                                           class="btn btn-danger">
                                            <i class="fa fa-close"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table color-table muted-table table-striped" id="grid_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>MS</th>
                                    <th>Số nhà</th>
                                    <th>Tên đường</th>
                                    <th>Phường/Xã</th>
                                    <th>Quận/Huyện</th>
                                    <th>Tỉnh/TP</th>
                                    <th>Ghi chú</th>
                                    <th>Ngang</th>
                                    <th>Dài</th>
                                    <th>DT</th>
                                    <th>Kết cấu</th>
                                    <th>Hướng</th>
                                    <th>Hình ảnh hiện trạng</th>
                                    <th>Hình ảnh giấy tờ chủ quyền</th>
                                    <th>Trạng thái</th>
                                    <th>Ngày tạo</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($products as $key => $product)
                                    <tr>
                                        <td>{{++$start}}</td>

                                        <td>
                                            @if($_type=='callback')
                                                <a href="{{route('backend.products.callback.edit',[$product->id])}}">{{$product->id}}</a>
                                            @elseif($_type=='owned')
                                                @if(auth()->guard('backend')->user()->can('products.owned.edit'))
                                                    <a href="{{route('backend.products.owned.edit',[$product->id])}}">{{$product->id}}</a>
                                                @endif
                                            @else
                                                @if(auth()->guard('backend')->user()->can('products.edit'))
                                                    <a href="{{route('backend.products.edit',[$product->id])}}">{{$product->id}}</a>
                                                @else
                                                    {{$product->id}}
                                                @endif
                                            @endif
                                        </td>

                                        <td>
                                            @if(auth()->guard('backend')->user()->account_position==\App\Models\CoreUsers::ACCOUNT_POSITION_SECRETARY&&$_type=='callback')
                                                <a href="javascript:;" data-id="{{$product->id}}" class="show_modal_note">{{$product->home_number?$product->home_number:'n/a'}}</a>
                                            @else
                                                {{$product->home_number?$product->home_number:'n/a'}}
                                            @endif
                                        </td>

                                        <td>{{isset($product->street->name)?$product->street->name:'n/a'}}</td>
                                        <td>{{isset($product->ward->name)?str_replace('Phường','P.', $product->ward->name):'n/a'}}</td>
                                        <td>{{isset($product->district->name)?str_replace('Quận','Q.', $product->district->name):'n/a'}}</td>
                                        <td>{{isset($product->province->name)?str_replace('Thành phố','TP.',$product->province->name):'n/a'}}</td>

                                        <td style="text-align: center">
                                            <a href="javascript:;" class="get_note" data-id="{{$product->id}}"><strong style="color: red">...</strong></a>
                                        </td>

                                        <td>{{(float)$product->horizontal}}</td>
                                        <td>{{(float)$product->vertical}}</td>
                                        <td>{{(float)$product->area}}</td>
                                        <td>
                                            {{$product->home_structure_text}}
                                        </td>
                                        <td>
                                            @foreach($home_direction as $st)
                                                @if($st['id']==$product->home_direction)
                                                    {{$st['name']}}
                                                    @break
                                                @endif
                                            @endforeach
                                        </td>

                                        <td data-id="{{$product->id}}">
                                            <div class="thumbnail-outer">
                                                @if($product->images)
                                                    @foreach($product->images as $v)
                                                        <div class="thumbnail">
                                                            <img src="{{$v->file_src}}" height="60"/>
                                                            <a href="javascript:;" onclick="remove_image($(this),'image')" data-id="{{$v->id}}"><i class="fa fa-trash-o" title="xóa hình"></i></a>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>

                                            <p class="upload">
                                                <input type="file" class="image_select" onchange="upload(this,'image')" name="file" accept="image/*" multiple/>
                                            </p>
                                        </td>
                                        <td data-id="{{$product->id}}">
                                            <div class="thumbnail-outer">
                                                @if($product->images_extra)
                                                    @foreach($product->images_extra as $v)
                                                        <div class="thumbnail">
                                                            <img src="{{$v->file_src}}" height="60"/>
                                                            <a href="javascript:;" onclick="remove_image($(this),'image_extra')" data-id="{{$v->id}}"><i class="fa fa-trash-o" title="xóa hình"></i></a>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>

                                            <p class="upload">
                                                <input type="file" class="image_select" onchange="upload(this,'image_extra')" name="file" accept="image/*" multiple/>
                                            </p>
                                        </td>

                                        <td>
                                            @foreach($censorship as $st)
                                                @if($st['id']==$product->status_censorship)
                                                    {{$st['name']}}
                                                    @break
                                                @endif
                                            @endforeach
                                        </td>
                                        <td>{{date('H:i d/m/y',strtotime($product->created_at))}}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="19">-</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{--pagination--}}
                    <br>
                    <div class="text-center">
                        {{ $products->links() }}
                    </div>

                </div>
            </div>
        </div>
    </div>
    @include('backend.products.modal.callbackRequest')
    @include('backend.products.modal.callback')
    @include('backend.products.modal.viewNote')
    @include('backend.products.modal.merge')
@endsection

@section('style_top')
    <link href="{{ asset('/storage/backend/assets/plugins/bootstrap-select/bootstrap-select.min.css')}}" rel="stylesheet" type="text/css"/>

    <style>
        .select2 {
            width: 100% !important;
            height: 36px !important;
        }

        .checkbox-basic {
            position: initial !important;
            left: initial !important;
            opacity: 1 !important;
        }

        @media (min-width: 576px) {
            #note-modal .modal-dialog {
                max-width: 1000px;
                margin: 1.75rem auto;
            }
        }

        .thumbnail {
            width: 60px;
            height: 60px;
            position: relative;
            float: left;
            margin-right: 3px;
        }

        .thumbnail img {
            max-width: 100%;
            max-height: 100%;
        }

        .thumbnail a {
            display: block;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 3px;
            right: 3px;
            background: #FDFF21;
            overflow: hidden;
            padding: 1px 6px;
            color: red;
            font-weight: bold;
            font-size: 13px;
        }

        p.upload {
            clear: both;
            padding-top: 15px;
            padding-bottom: 15px;
            margin-bottom: 0;
        }
    </style>
@stop

@section('script')

    <script src="{{ asset('/storage/backend/assets/plugins/dropzone-master/dist/dropzone.js')}}" type="text/javascript"></script>

    <script src="{{ asset('/storage/backend/assets/plugins/bootstrap-select/bootstrap-select.min.js')}}" type="text/javascript"></script>

    <script>
        function remove_image(d, type) {
            var image_id = d.data('id');
            var product_id = d.parent().parent().parent().data('id');
            var _token = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: 'POST',
                url: '{{route('backend.products.image.remove')}}',
                data: {image_id: image_id, product_id: product_id, type: type, _token: _token},
                dataType: 'json',
                success: function (data) {
                    if (data.e == 0) {
                        d.parent().remove();
                        $('meta[name="csrf-token"]').attr('content', data._token);
                    } else {
                        alert(data.r);
                    }
                }
            });
        }

        var _process = false;

        function upload(d, type) {

            if (_process)
                return;

            _process = true;

            var product_id = $(d).parent().parent().data('id');

            // Get the selected files from the input.
            var files = d.files;

            // Create a new FormData object.
            var formData = new FormData();

            // Loop through each of the selected files.
            for (var i = 0; i < files.length; i++) {
                var file = files[i];

                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }

                // Add the file to the request.
                formData.append('file[]', file, file.name);
            }

            formData.append('product_id', product_id);
            formData.append('type', type);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{route('backend.products.image.upload')}}',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (data) {
                    _process = false;
                    $(d).val('');
                    if (data.e == 0) {
                        $('meta[name="csrf-token"]').attr('content', data._token);

                        $.each(data.r, function (index, item) {
                            if (type == 'image') {
                                var html = '<div class="thumbnail">\n' +
                                    ' <img src="' + item.url + '" height="60">\n' +
                                    '  <a href="javascript:;" onclick="remove_image($(this),\'image\')" data-id="' + item.id + '"><i class="fa fa-trash-o" title="xóa hình"></i></a>\n' +
                                    '  </div>';
                            } else {
                                var html = '<div class="thumbnail">\n' +
                                    ' <img src="' + item.url + '" height="60">\n' +
                                    '  <a href="javascript:;" onclick="remove_image($(this),\'image_extra\')" data-id="' + item.id + '"><i class="fa fa-trash-o" title="xóa hình"></i></a>\n' +
                                    '  </div>';
                            }

                            $($(d).parent().parent().find('.thumbnail-outer')[0]).append($.parseHTML(html));
                        });
                    } else {
                        alert(data.r);
                    }
                }
            });
        }
    </script>

    <script>
        new SelectLocation('#form-filter ');
        $('a.get_note').click(function () {
            var product_id = $(this).data('id');
            $.ajax({
                url: '{{route('backend.products.ajax.getNote')}}',
                type: 'get',
                data: {product_id: product_id},
                success: function (data) {
                    if (data.e == 0) {
                        $('#view-note-modal .modal-content').html(data.r);
                        $('#view-note-modal').modal('show');
                    } else {
                        alert(data.r);
                    }
                }
            });
        });
        function addNote() {
            var process = false;
            var form = $('.form_add_note');
            var url = form.attr('action');

            // console.log(form.find('.note-land-content').val());
            //
            // if (form.find('.note-land-content').val() == '') {
            //     alert('Vui lòng nhập nội dung ghi chú!')
            //     return;
            // }
            //
            // return;
            if (process)
                return;

            process = true;
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function (data) {
                    if (data.e == 0) {
                        $('#view-note-modal .modal-content').html(data.r);
                    } else {
                        alert(data.r);
                    }
                    process = false;
                }
            });
        }
    </script>
@stop