@extends('adminlte::page')

@section('title', __('clients.tab-title'))

@section('content_header')
    @if ($message = Session::get('f_message'))
        <div class="alert alert-danger alert-block" style="background-color: #ee6e67">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
        </div>
    @endif

    <div class="row" style="margin-left: 5px">
        <h1 class="m-0 text-dark"> {{$client->name}}</h1>

        <ul class="nav nav-tabs" style="margin-left: 1%">
            <li class="nav-item">
                <a class="nav-link active" href="#client_basic_data" data-toggle="tab">
                    Osnovni podaci
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#client_locations" data-toggle="tab">
                    Lokacije
                </a>
            </li>
        </ul>
    </div>

@stop
@section('content')
    <div class="row" style="margin-top: -15px">
        @include("clients.locations.tabs.client_data")
        @include("clients.locations.tabs.location_list")
    </div>
@stop
@section('footer')
    @include('locations.modals.create')
    @include('locations.modals.edit')
    @include('locations.modals.delete')
    @include('locations.modals.working_hours')
    @include('locations.modals.stock')
    @include('cornford.modals.googleMap')
@endsection
@push('css')
    @include('adminlte::libs.css.datatables')
    @include('adminlte::libs.css.select2')
@endpush

@php
    $columns = [
        [
            'data' => 'name',
            'name' => 'name',
            'title' => __('clients.locations.table.columns.name')
        ],
        [
            'data' => 'street_address',
            'name' => 'street_address',
            'title' => __('clients.locations.table.columns.street_address')
        ],
        [
            'data' => 'city',
            'name' => 'city',
            'title' => __('clients.locations.table.columns.city')
        ],
        [
            'data' => 'city',
            'name' => 'city',
            'title' => __('clients.locations.table.columns.city')
        ],
        [
            'data' => 'country',
            'name' => 'country',
            'title' => __('clients.locations.table.columns.country')
        ],
        [
            'data' => 'actions',
            'name' => 'actions',
            'title' => __('clients.locations.table.columns.actions'),
            'sortable' => false,
            'width' => '8%'
        ],
    ];

    $locationsUrl = url('/locations');
    $url = url()->current();
    $baseUrl = url('/');
    $endpoint = [
        'url' => "{$url}/list",
        'dataSrc' => 'data'
    ];

@endphp

@push('js')
    @include('adminlte::libs.js.datatables')
    @include('adminlte::libs.js.select2')
    @include('adminlte::libs.js.litepicker')

    <script type="text/javascript" src="{{ asset('js/tabswitcher.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/modal-helpers.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/datatables-helpers.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/litepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.timepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/clients.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/locations.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/google-maps.min.js') }}"></script>
    <script type="text/javascript">
        $(function () {
            @if(session()->has('tab'))
            showTab('{{ session()->get('tab') }}')
            @endif
            $(document).on('click', '#set_location_coordinates', function () {
                const $form = $('#'+$(this).data("form"))
                findLocationByAddressData(
                    '{{ "{$baseUrl}" }}',
                    $form.find(`[id="location[street_address]"]`).val() + ', ' + $form.find(`[id="location[postal_code]"]`).val() + ', ' +
                    $form.find(`[id="location[city]"]`).val() + ', ' + $form.find(`[id="location[country]"]`).val()
                )
                $('#google-map-modal').modal('show')
            })

            $(document).on('click', '#location_create_stock', function () {
                $('#location-stock-create-modal').modal('show')
            })

             $(document).on('click', '#location_edit_stock', function () {
                $('#location-stock-edit-modal').modal('show')
            })

            $(document).ready(function(){
                $('input.timepicker').timepicker({
                    timeFormat: 'HH:mm',
                    interval: 60,
                    startTime: '07:00',
                    dynamic: false,
                    dropdown: true,
                    scrollbar: true,
                    zindex: 99999
                })
            });

            $.fn.dataTableExt.oSort["numbers-desc"] = function (x, y) {
                var x_str = x.split('">')[1].split('</')[0];
                var y_str = y.split('">')[1].split('</')[0];

                if(x_str != '' && y_str != ''){
                    x_str = x_str.replace(/\./g, '').replace(/\,/g, '.');
                    y_str = y_str.replace(/\./g, '').replace(/\,/g, '.');

                    return parseFloat(x_str) < parseFloat(y_str);
                }else{
                    return x < y;
                }
            };

            $.fn.dataTableExt.oSort["numbers-asc"] = function (x, y) {
                var x_str = x.split('">')[1].split('</')[0];
                var y_str = y.split('">')[1].split('</')[0];

                if(x_str != '' && y_str != ''){
                    x_str = x_str.replace(/\./g, '').replace(/\,/g, '.');
                    y_str = y_str.replace(/\./g, '').replace(/\,/g, '.');

                    return parseFloat(x_str) > parseFloat(y_str);
                }else{
                    return x > y;
                }
            };
        })



        var table = $('.client-locations-table').DataTable({
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
            pageLength: 25,
            order: [ 0, "desc" ],
            ajax: JSON.parse('@json($endpoint)'),
            columns: JSON.parse('@json($columns)'),
            columnDefs: [
                {
                    targets: '_all',
                    defaultContent: '-'
                },
            ],
            createdRow: function( row, data, dataIndex ) {

                if(data['service_type'] === 'rent') {
                    $(row).css('background-color', 'rgb(255, 248, 213)');
                }
                else if(data['service_type'] === 'service') {
                    $(row).css('background-color', '#ecffe5');
                }

            },
            buttons: [
                {
                    text: 'Dodaj',
                    className: 'btn btn-primary',
                    action: () => $('#location-create-modal').modal('show')
                }
            ],
            deferRender: true,
            autoWidth: false,
        });

        $(document).on('click', '#location_products', function () {

        })

        $(document).on('click', '.client-locations-table .btn-edit', function () {
            sessionStorage.setItem('locationId', this.dataset.location_id);
            showLocationEditForm('{{ "{$locationsUrl}/" }}' + this.dataset.location_id)
        })

        $(document).on('hidden.bs.modal', '#location-stock-modal',function () {
            $('#location-edit-modal').css('overflowY','auto')
            $('#location-create-modal').css('overflowY','auto')
        });

        $(document).on('change', '#location-stock-modal input', function () {
            let sum = 0;
            $('.summing_stock').each(function(){
                sum += parseInt(this.value);
            });
            $('[id="products[total][stock]"]').val(sum)

            sum = 0;
            $('.summing_picked_up').each(function(){
                sum += parseInt(this.value);
            });
            $('[id="products[total][picked_up]"]').val(sum)

            sum = 0;
            $('.summing_for_return').each(function(){
                sum += parseInt(this.value);
            });
            $('[id="products[total][for_return]"]').val(sum)

            sum = 0;
            $('.summing_rest_todo').each(function(){
                sum += parseInt(this.value);
            });
            $('[id="products[total][rest_todo]"]').val(sum)
        })

        $('#location-edit-modal, #location-create-modal').on('hidden.bs.modal', function () {
            $('#location-stock-modal input').val(0).trigger('change').css('background-color', 'white')
            $('#location-stock-modal select').val('').trigger('change')
        })

        $('#location-delete-button').click(function () {
            $(this).prop('disabled', true)

            deleteEntity('{{ "{$locationsUrl}/" }}' + this.dataset.location_id, function () {
                table.ajax.reload()
                $('#location-delete-modal').modal('hide')
            })
        })

        $('#location-delete-modal').on('hidden.bs.modal', function () {
            $(this).find('#location-delete-button').attr('data-location_id', '')
            $(this).find('.location-name').text('')
            $(this).find('button').prop('disabled', false)
        })

        $(document).on('click', '#location-create-form-submit-btn', function (e) {
            e.preventDefault()
            let products_data = $('#products-form').serialize()
            let working_time_data = $('#working-time-form').serialize()

            let months = $("#location-create-modal .s2-month-of-servicing").select2("val")

            $('#location-create-modal .s2-month-of-servicing').val(months).trigger('change')

            $('#location-create-form #products-data').val(products_data)
            $('#location-create-form #working-time-data').val(working_time_data)
            $('#location-create-form').submit();
            table.ajax.reload();
        })

        $(document).on('click', '#location-edit-form-submit-btn', function (e) {
            e.preventDefault()
            let products_data = $('#products-form').serialize()
            let working_time_data = $('#working-time-form').serialize()

            let months = $("#location-edit-modal .s2-month-of-servicing").select2("val")

            console.debug(products_data, working_time_data, months)
            $('#location-edit-modal .s2-month-of-servicing').val(months).trigger('change')

            $('#location-edit-form #products-data').val(products_data)
            $('#location-edit-form #working-time-data').val(working_time_data)
            $('#location-edit-form').submit();

            table.ajax.reload();
        })

        @if($errors->hasBag('store-location'))
            $('#location-create-modal').modal('show')
            console.error(JSON.parse('{!! $errors->getBag('store-location')->toJson() !!}'))
        let array = []
        @foreach(old('location.month_of_servicing') as $month)
        array.push({{$month}})
        @endforeach
        setTimeout(function(){
            $('#location-create-form [id="location[month_of_servicing]"]').val(array).trigger('change')
        }, 900);
        @endif

        @if($errors->hasBag('update-location'))
            showLocationEditForm('{{ "{$locationsUrl}/" }}'+ sessionStorage.getItem('locationId'))
            let array = []
            @foreach(old('location.month_of_servicing') as $month)
                array.push({{$month}})
            @endforeach
            $(`#location-edit-modal`).modal('show')
            console.error(JSON.parse('{!! $errors->getBag('update-location')->toJson() !!}'))
            setTimeout(function(){
                $('#location-edit-form [id="location[month_of_servicing]"]').val(array).trigger('change')
            }, 900);
        @endif
    </script>
@endpush