@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
    <h3 class="m-0 text-center menu-title">Profil klijenta {{$client->name}}</h3>
@stop
@section('content')
    <div class="row">
        <div class="col">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active basic_data" 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">
                        Uređaji
                    </a>
                </li>
            </ul>
        </div>
        <div class="col">
            <ul class="nav nav-tabs" style="border: 0;">
                <li class="nav-item">
                    <a id="nav-locations" class="nav-link active disabled" data-toggle="tab">
                        Klinike/Odjeli
                    </a>
                </li>
            </ul>

        </div>
    </div>



    <div class="row">
        @include("clients.profile.tabs.client_data")
        @include("clients.profile.tabs.locationProducts")
    </div>
@stop
@section('footer')
    @include('clients.profile.modals.create')
    @include('clients.profile.modals.edit')
    @include('clients.profile.modals.delete')
@endsection
@push('css')
    @include('adminlte::libs.css.datatables')
    @include('adminlte::libs.css.select2')
@endpush

@php
    $columns = [
        [
            'data' => 'name',
            'name' => 'name',
             'sortable' => false,
        ],
        [
            'data' => 'actions',
            'name' => 'actions',
            'sortable' => false,
            'width' => '15%'
        ],
    ];

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

@endphp

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

    <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/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">
        $(document).ready(function() {
            @if(session()->has('tab'))
            showTab('{{ session()->get('tab') }}')
            @endif

            if ($('.basic_data.nav-link').hasClass('active')) {
                $('#nav-locations').show();
            } else {
                $('#nav-locations').hide();
            }

            $('.nav-link').click(function() {
                $('#nav-locations').show();
                if ($('.basic_data.nav-link').hasClass('active')) {
                    $('#nav-locations').hide();
                }
            });

            $(document).on('click', '#addNewLocation', function () {
                const modal = $('#location-create-modal');
                $('#location-create-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
                })
            });

            var table = $('.client-locations-table').DataTable({
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
                pageLength: 25,
                order: [ 0, "asc" ],
                ajax: JSON.parse('@json($endpoint)'),
                columns: JSON.parse('@json($columns)'),
                columnDefs: [
                    {
                        targets: '_all',
                        defaultContent: '-',
                    },
                ],
                dom: '',
                buttons: [],
                deferRender: true,
                autoWidth: false,
            });


            $(document).on('click', '.client-locations-table .btn-edit', function () {
                const $form = $(`#location-edit-form`)

                $form.find('#location_name').val( $(this).parents('tr').find('td:first-of-type').text())
                $form.attr('action', route('locations.update', {locationId: 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')
            });

            $('#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 () {
                    $('#location-delete-modal').modal('hide')
                    table.ajax.reload()
                })
            })

            // $('#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-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() !!}'))
            @endif

            @if($errors->hasBag('update-location'))
                showLocationEditForm('{{ "{$locationsUrl}/" }}'+ sessionStorage.getItem('locationId'))
                $(`#location-edit-modal`).modal('show')
                console.error(JSON.parse('{!! $errors->getBag('update-location')->toJson() !!}'))
            @endif
        })
    </script>
@endpush