@extends('admin.app')
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">Kargolar</h2>
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a
                                            href="/panel/gosterge-paneli">Gösterge
                                            Paneli</a>
                                    </li>
                                    <li class="breadcrumb-item active">Kargolar
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-body">

                <!-- Data list view starts -->
                <section id="data-list-view" class="data-list-view-header">

                    <div class="card">
                        <div class="card-content">

                            <div class="card-body">
                                <!-- Table with outer spacing -->

                                <button class="btn btn-primary pull-right" data-toggle="modal"
                                        data-target="#add-coupon-modal" >Kargo Ekle
                                </button>
                                <div class="modal fade" id="add-coupon-modal" tabindex="-1" role="dialog"
                                     aria-labelledby="add-coupon-modal-label" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="add-coupon-modal-label">Kargo Ekle</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="shipping-form-0">
                                                    <div class="row">
                                                        {{csrf_field()}}
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label>Kargo Firma Adı</label>
                                                                <input type="text" name="shipping_name"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label>Kargo Takip Bağlantısı</label>
                                                                <input type="text" name="shipping_url"
                                                                       class="form-control">
                                                            </div>
                                                        </div>


                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label>Durum</label>
                                                                <select name="status" class="form-control">
                                                                    <option value="active">Aktif</option>
                                                                    <option value="passive">Pasif</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="input-group">
                                                                   <span class="input-group-btn">
                                                                     <a style="color: white"
                                                                        data-input="thumbnail-0" data-preview="holder-0"
                                                                        class="btn btn-primary add-image-button">
                                                                       <i class="fa fa-picture-o"></i> Logo Seç
                                                                     </a>
                                                                   </span>
                                                                <input type="hidden" id="thumbnail-0" class="form-control"
                                                                       value="" name="logo">
                                                            </div>
                                                            <img id="holder-0" src=""
                                                                 style="margin-top:15px;max-height:100px;">
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div style="text-align: center" class="form-group">
                                                                <label>Varsayılan Kargo</label>
                                                                <input type="checkbox" name="default"
                                                                       class="form-control">
                                                            </div>
                                                        </div>

                                                        <div style="width: 100%;text-align: center">
                                                            <h4 style="text-align: center">Kargo Bölge Ve Fiyat Aralığı</h4>
                                                        </div>
                                                        <div class="col-sm-12" id="places-box">
                                                            <div class="row pb-1"
                                                                 style="border-bottom: 1px solid lightgray">
                                                                <div class="col-sm-4">
                                                                    <select onchange="replacer(8000)" name="places[8000][city_id]" id="city-8000"
                                                                            class="form-control select2">
                                                                        <option value="0">Tümü</option>
                                                                        @foreach($cities as $city)
                                                                            <option
                                                                                value="{{$city->id}}">{{$city->name}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <div class="col-sm-4">
                                                                    <select name="places[8000][district_id]" id="district-8000"
                                                                            class="form-control select2">
                                                                        <option value="0">Tümü</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-sm-4">
                                                                    <select name="places[8000][country_id]"
                                                                            class="form-control select2">
                                                                        <option value="212">Türkiye</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-sm-4 pt-1">
                                                                    <input class="form-control" type="number" name="places[8000][price_min]" placeholder="Min. Fiyat">
                                                                </div>
                                                                <div class="col-sm-4 pt-1">
                                                                    <input class="form-control" type="number" name="places[8000][price_max]" placeholder="Max. Fiyat">
                                                                </div>
                                                                <div class="col-sm-4 pt-1">
                                                                    <button type="button"
                                                                            class="btn btn-sm btn-info add-more-places"><i
                                                                            class="fa fa-plus"></i></button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                    Kapat
                                                </button>
                                                <button onclick="formPoster(0)" type="button" class="btn btn-primary" id="add-coupon-post">
                                                    Ekle
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Kargo Logo</th>
                                            <th>Kargo Adı</th>
                                            <th>Takip Url</th>
                                            <th>Varsayılan</th>
                                            <th>Durum</th>
                                            <th>Eklenme Tarihi</th>
                                            <th>Aksiyon</th>
                                        </tr>
                                        </thead>
                                        <tbody id="coupon-table-body">
                                        @if(isset($shippings) && $shippings)
                                            @foreach($shippings as $shipping)
                                                <tr id="coupon-{{$shipping->id}}">
                                                    <td>{{$shipping->id}}</td>
                                                    <td><img src="{{$shipping->shipping_logo}}" style="width: 100px">
                                                    </td>
                                                    <td>{{$shipping->shipping_name}}</td>
                                                    <td>{{$shipping->shipping_url}}</td>
                                                    <td>{{$shipping->default ? 'Evet' : 'Hayır'}}</td>
                                                    <td>@if($shipping->status == 'active')<label
                                                            class="btn btn-sm bg-gradient-success status-label"
                                                            id="status-label-{{$shipping->id}}"
                                                            data-id="{{$shipping->id}}"
                                                            data-change="passive">Açık</label>@else <label
                                                            class="btn btn-sm bg-gradient-danger status-label"
                                                            id="status-label-{{$shipping->id}}"
                                                            data-id="{{$shipping->id}}"
                                                            data-change="active">Kapalı</label> @endif</td>
                                                    <td>{{date('d-m-Y H:i:s',strtotime($shipping->created_at))}}</td>
                                                    <td>
                                                        <div class="btn-group">
                                                            <button data-toggle="modal"
                                                                    data-target="#edit-shipping-{{$shipping->id}}"
                                                                    class="btn btn-md btn-info waves-effect waves-light">
                                                                <i
                                                                    class="feather icon-edit"></i></button>
                                                            <button onclick="removeShipping({{$shipping->id}})"
                                                                class="btn btn-md btn-danger waves-effect waves-light">
                                                                <i
                                                                    class="feather icon-delete"></i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                    <div style="text-align: center">
                                        {{$shippings->links()}}

                                    </div>
                                    @foreach($shippings as $ship)
                                        <div class="modal fade" id="edit-shipping-{{$ship->id}}" tabindex="-1"
                                             role="dialog"
                                             aria-labelledby="add-coupon-modal-label" aria-hidden="true">
                                            <div class="modal-dialog modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="add-coupon-modal-label">Kargo
                                                            Düzenle</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form id="shipping-form-{{$ship->id}}">
                                                            <div class="row">
                                                                <input type="hidden" name="id" value="{{$ship->id}}">
                                                                {{csrf_field()}}
                                                                <div class="col-sm-12">
                                                                    <div class="form-group">
                                                                        <label>Kargo Firma Adı</label>
                                                                        <input type="text"
                                                                               value="{{$ship->shipping_name}}"
                                                                               name="shipping_name"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <div class="form-group">
                                                                        <label>Kargo Takip Bağlantısı</label>
                                                                        <input type="text"
                                                                               value="{{$ship->shipping_url}}"
                                                                               name="shipping_url"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>


                                                                <div class="col-sm-6">
                                                                    <div class="form-group">
                                                                        <label>Durum</label>
                                                                        <select name="status" class="form-control">
                                                                            <option
                                                                                @if($ship->status == 'active') selected
                                                                                @endif value="active">Aktif
                                                                            </option>
                                                                            <option
                                                                                @if($ship->status == 'passive') selected
                                                                                @endif value="passive">Pasif
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <div class="input-group">
                                                                   <span class="input-group-btn">

                                                                   </span>
                                                                        <span class="input-group-btn">
                                                                     <a style="color: white"
                                                                        data-input="thumbnail-600{{$ship->id}}" data-preview="holder-600{{$ship->id}}"
                                                                        class="btn btn-primary add-image-button">
                                                                       <i class="fa fa-picture-o"></i> Logo Seç
                                                                     </a>
                                                                   </span>
                                                                        <input type="hidden" id="thumbnail-600{{$ship->id}}"
                                                                               class="form-control"
                                                                               value="{{$ship->shipping_logo}}" name="logo">
                                                                    </div>
                                                                    <img id="holder-600{{$ship->id}}" src="{{asset($ship->shipping_logo)}}"
                                                                         style="margin-top:15px;max-height:100px;">
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <div style="text-align: center" class="form-group">
                                                                        <label>Varsayılan Kargo</label>
                                                                        <input type="checkbox"
                                                                               @if($ship->default) checked
                                                                               @endif name="default"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div style="width: 100%;text-align: center">
                                                                <h4 style="text-align: center">Kargo Bölge Ve Fiyat Aralığı</h4>
                                                                </div>
                                                                <div class="col-sm-12" >
                                                                    <div class="row pb-1"
                                                                         style="border-bottom: 1px solid lightgray">
                                                                        <div class="col-sm-4 pt-1">
                                                                            <button type="button"
                                                                                    class="btn btn-sm btn-info add-more-places"><i
                                                                                    class="fa fa-plus"></i></button>
                                                                        </div>
                                                                    </div>
                                                                    @if($ship->places)
                                                                        @foreach($ship->places as $places)
                                                                            <div class="row pb-1 pt-1"
                                                                                 style="border-bottom: 1px solid lightgray" id="row-500{{$places->id}}">
                                                                                <div class="col-sm-4">
                                                                                    @if($places->district_id == 0 )
                                                                                        Tümü
                                                                                    @else
                                                                                        {{$places->district->name}}

                                                                                    @endif
                                                                                        <input type="hidden" name="places[500{{$places->id}}][district_id]" value="{{$places->district_id}}">
                                                                                </div>
                                                                                <div class="col-sm-4">
                                                                                    @if($places->city_id == 0 )
                                                                                        Tümü
                                                                                    @else
                                                                                        {{$places->city->name}}
                                                                                    @endif
                                                                                        <input type="hidden" name="places[500{{$places->id}}][city_id]" value="{{$places->city_id}}">
                                                                                </div>
                                                                                <div class="col-sm-4">
                                                                                    @if($places->country_id == 0 )
                                                                                        Tümü
                                                                                    @else
                                                                                        {{$places->country->name}}
                                                                                    @endif
                                                                                        <input type="hidden" name="places[500{{$places->id}}][country_id]" value="{{$places->country_id}}">
                                                                                </div>
                                                                                <div class="col-sm-4 pt-1">
                                                                                    <label>Min. Fiyat: {{$places->price_min}}</label>
                                                                                    <input class="form-control" type="hidden" name="places[500{{$places->id}}][price_min]" value="{{$places->price_min}}" placeholder="Min. Fiyat">
                                                                                </div>
                                                                                <div class="col-sm-4 pt-1">
                                                                                    <label>Maks. Fiyat: {{$places->price_max}}</label>
                                                                                    <input class="form-control" type="hidden" value="{{$places->price_max}}" name="places[500{{$places->id}}][price_max]" placeholder="Max. Fiyat">
                                                                                </div>
                                                                                <div class="col-sm-4">
                                                                                    <button type="button"
                                                                                            class="btn btn-sm btn-danger"
                                                                                            onclick="remover('500'+{{$places->id}})">
                                                                                        <i class="fa fa-trash"></i>
                                                                                    </button>
                                                                                </div>
                                                                            </div>
                                                                            </div>
                                                                                @endforeach
                                                                                @endif
                                                                </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">
                                                            Kapat
                                                        </button>
                                                        <button type="button" class="btn btn-primary"
                                                                onclick="formPoster({{$ship->id}})">
                                                            Düzenle
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    @endif
                                </div>

                            </div>
                        </div>
                    </div>

                </section>
                <!-- Data list view end -->

            </div>
        </div>
    </div>


@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/plugins/extensions/toastr.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/vendors.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/extensions/toastr.css')}}">
@endsection
@section('js')

    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset('app-assets/vendors/js/ui/jquery.sticky.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/toastr.min.js')}}"></script>
    <!-- END: Page Vendor JS-->
    <!-- BEGIN: Page JS-->
    <script src="{{asset('app-assets/js/scripts/extensions/toastr.js')}}"></script>
    <script>

        function formPoster(formId){
            $.post('{{route('post-add-edit-shipping')}}',$('#shipping-form-'+formId).serialize(),function (response) {
               if(response.status == 'success'){
                   toastr.success(response.msg, 'Başarılı!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
                   setTimeout(function () {
                       window.location.reload();
                   },200);
               } else{
                   toastr.warning(response.msg, 'Hata!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
               }
            }).fail(function (response) {
                if(response.responseJSON && response.responseJSON.status == 'failure'){
                    toastr.warning(response.responseJSON.msg, 'Hata!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
                }else{
                    toastr.warning('Güncellenemedi', 'Hata!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
                }
            });
        }


        function removeShipping(id) {

            if (window.confirm("Silmek istediğinize emin misinz?")) {
                $.get('{{route('get-delete-shipping',[''])}}/' + id, function (response) {
                    if (response.status == 'success') {
                        $('#coupon-' + response.id).fadeOut();
                        toastr.success(response.msg, 'Başarılı!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    } else {
                        toastr.warning(response.msg, 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    }
                }).fail(function (response) {

                    if (response.responseJSON.message) {
                        toastr.warning(response.responseJSON.message, 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    } else {
                        toastr.warning('İşlem Yapılamadı.', 'Hata!', {
                            positionClass: 'toast-bottom-right',
                            containerId: 'toast-bottom-right'
                        });
                    }
                });
            }
        }

        (function ($) {

            $.fn.filemanager = function (type, options) {
                type = type || 'file';

                this.on('click', function (e) {
                    var route_prefix = (options && options.prefix) ? options.prefix : '/filemanager';
                    var target_input = $('#' + $(this).data('input'));
                    var target_preview = $('#' + $(this).data('preview'));
                    window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
                    window.SetUrl = function (items) {
                        var file_path = items.map(function (item) {
                            return item.url;
                        }).join(',');

                        // set the value of the desired input to image url
                        target_input.val('').val(file_path).trigger('change');

                        // clear previous preview
                        target_preview.html('');

                        // set or change the preview image src
                        items.forEach(function (item) {
                            target_preview.attr('src', item.thumb_url);
                        });

                        // trigger change event
                        target_preview.trigger('change');
                    };
                    return false;
                });
            }

        })(jQuery);
        $('.add-image-button').filemanager('image');
    </script>
    <script>
        $('#city-0').on('change', function () {
            $.get('{{route('get-districts','')}}/' + $(this).children("option:selected").val(), function (response) {
                var html = '<option value="">{{__('general.user-profile.select_district')}}</option>';
                if (response.status == 'success') {
                    $.each(response.districts, function (index, value) {
                        html += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    $('#district-0').html(html);
                }
            });
        });

        function replacer(count) {
            $.get('{{route('get-districts','')}}/' + $('#city-' + count).children("option:selected").val(), function (response) {
                var html = '<option value="0">Tümü</option>';
                if (response.status == 'success') {
                    $.each(response.districts, function (index, value) {
                        html += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    $('#district-' + count).html(html);
                }
            });
        }

        function remover(count) {
            $('#row-' + count).remove();
        }

        var counter = 90000;
        $('.add-more-places').on('click',function () {

            var html =
                '                                                                    <div class="row pt-1 pb-1"\n' +
                '                                                                         style="border-bottom: 1px solid lightgray" id="row-'+counter+'">\n' +
                '                                                                        <div class="col-sm-4">\n' +
                '                                                                            <select id="city-'+counter+'" onchange="replacer('+counter+')" name="places['+counter+'][city_id]" \n' +
                '                                                                                    class="form-control select2">\n' +
                '                                                                                <option value="0">Tümü</option>\n' +
                '                                                                                @foreach($cities as $city)\n' +
                '                                                                                    <option\n' +
                '                                                                                        value="{{$city->id}}">{{$city->name}}</option>\n' +
                '                                                                                @endforeach\n' +
                '                                                                            </select>\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4">\n' +
                '                                                                            <select name="places['+counter+'][district_id]" id="district-'+counter+'"\n' +
                '                                                                                    class="form-control select2">\n' +
                '                                                                                <option value="0">Tümü</option>\n' +
                '                                                                            </select>\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4">\n' +
                '                                                                            <select name="places['+counter+'][country_id]"\n' +
                '                                                                                    class="form-control select2">\n' +
                '                                                                                <option value="212">Türkiye</option>\n' +
                '                                                                            </select>\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4 pt-1">\n' +
                '                                                                           <input class="form-control" type="number" name="places['+counter+'][price_min]" placeholder="Min. Fiyat">\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4 pt-1">\n' +
                '                                                                           <input class="form-control" type="number" name="places['+counter+'][price_max]" placeholder="Max. Fiyat">\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4 pt-1">\n' +
                '                                                                    <button type="button" class="btn btn-sm btn-danger" onclick="remover(' + counter + ')"><i class="fa fa-trash"></i></button>\n' +
                '                                                                </div>\n' +
                '                                                                    </div>';
            $(this).parent('div').parent('div').parent('div').append(html);
            counter = counter + 1;
        });
        $('#more-place').on('click', function () {
            var html =
                '                                                                    <div class="row pt-1 pb-1"\n' +
                '                                                                         style="border-bottom: 1px solid lightgray" id="row-'+counter+'">\n' +
                '                                                                        <div class="col-sm-4">\n' +
                '                                                                            <select id="city-'+counter+'" onchange="replacer('+counter+')" name="places['+counter+'][city_id]" \n' +
                '                                                                                    class="form-control select2">\n' +
                '                                                                                <option value="0">Tümü</option>\n' +
                '                                                                                @foreach($cities as $city)\n' +
                '                                                                                    <option\n' +
                '                                                                                        value="{{$city->id}}">{{$city->name}}</option>\n' +
                '                                                                                @endforeach\n' +
                '                                                                            </select>\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4">\n' +
                '                                                                            <select name="places['+counter+'][district_id]" id="district-'+counter+'"\n' +
                '                                                                                    class="form-control select2">\n' +
                '                                                                                <option value="0">Tümü</option>\n' +
                '                                                                            </select>\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4">\n' +
                '                                                                            <select name="country_id"\n' +
                '                                                                                    class="form-control select2">\n' +
                '                                                                                <option value="212">Türkiye</option>\n' +
                '                                                                            </select>\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4 pt-1">\n' +
                '                                                                           <input class="form-control" type="number" name="places['+counter+'][price_min]" placeholder="Min. Fiyat">\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4 pt-1">\n' +
                '                                                                           <input class="form-control" type="number" name="places['+counter+'][price_max]" placeholder="Max. Fiyat">\n' +
                '                                                                        </div>\n' +
                '                                                                        <div class="col-sm-4 pt-1">\n' +
                '                                                                    <button type="button" class="btn btn-sm btn-danger" onclick="remover(' + counter + ')"><i class="fa fa-trash"></i></button>\n' +
                '                                                                </div>\n' +
                '                                                                    </div>';
            $('#places-box').append(html);
            counter = counter + 1;
        });
    </script>
@endsection