@extends('faq::layouts.master')

@section('plugin-styles')
    <link rel="stylesheet" href="{{asset('vendors/OrgChart/css/jquery.orgchart.min.css')}}">
@stop

@section('content')

    <div class="content">
        <x-content.header title="{{__('title.organizationalcharts')}}" />

        <form id="form" method="POST" action="{{route('organizational-charts.update', $organizational_chart->id)}}" accept-charset="UTF-8">
            <div class="tw-card">
                <div class="p-6">
                    <div class="w-full flex flex-col gap-4">
                        <div class="w-full lg:w-[60%] flex justify-between items-start flex-col lg:flex-row gap-2 lg:gap-0">
                            <label class="form-label text-sm-semibold w-full lg:w-1/2" for="name">{{trans("organizational_charts.name")}}*</label>
                            <input type="text" class="form-input text-md-regular text-custom-grey-500 w-full lg:w-1/2" id="name" name="name" placeholder="{{trans("organizational_charts.name")}}" value="{{$organizational_chart->name}}" required>
                        </div>

                        <hr/>

                        <div class="w-full lg:w-[60%] flex justify-between items-start flex-col lg:flex-row gap-2 lg:gap-0">
                            <label class="form-label text-sm-semibold w-full lg:w-1/2" for="location_id" >{{trans("organizational_charts.location")}}*</label>
                            <div class="w-full lg:w-1/2 relative">
                                <select id="location_id" name="location_id" class="pd-dropdown w-full form-input form-input-select text-custom-grey-500" data-placeholder="{{__('forms.lbl_select_category')}}">
                                        <option value="">{{__('forms.lbl_select_locations')}}</option>
                                        @foreach($locations as $location)
                                            <option {{($location->id == $organizational_chart->location_id) ? 'selected' : ''}} value="{{$location->id}}">
                                                {{$location->name}}
                                            </option>
                                        @endforeach
                                    </select>
                            </div>
                        </div>

                        <hr/>

                        <div class="w-full lg:w-[60%] flex justify-between items-start flex-col lg:flex-row gap-2 lg:gap-0">
                            <label for="title"  class="form-label text-sm-semibold w-full lg:w-1/2">{{ __('forms.lbl_title') }}</label>
                            <div class="w-full lg:w-1/2">
                                <textarea rows="6" class="w-full text-md-medium px-[14px] py-3 border border-custom-grey-300 text-custom-grey-500 rounded-lg outline-none" name="title" placeholder="{{ __('forms.lbl_title') }}">{{isset($root->title) ? $root->title : ''}}</textarea>
                            </div>
                        </div>

                        <hr/>

                        <div class="w-full lg:w-[60%] flex justify-between items-start flex-col lg:flex-row gap-2 lg:gap-0">
                            <label class="form-label text-sm-semibold w-full lg:w-1/2" for="user" >{{trans("organizational_charts.main_user")}}*</label>
                            <div class="w-full lg:w-1/2 relative">
                                <select id="user" name="user" class="pd-dropdown w-full form-input form-input-select text-custom-grey-500" data-placeholder="{{__('forms.lbl_click_here_start_typing')}}">
                                        <option value="">{{__('forms.lbl_select_locations')}}</option>
                                        @foreach($users as $user)
                                            <option {{(isset($root->user) && $root->user->id == $user->id) ? 'selected' : ''}} value="{{$user->id}}">
                                                {{$user->display_name}}
                                            </option>
                                        @endforeach
                                    </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 flex items-center gap-2">
                <button type="submit" class="btn-primary-base btn-save">
                    {{trans('forms.lbl_save')}}
                </button>
                <a href="{{route('organizational-charts.index')}}"  class="btn-tertiary-base">{{trans('forms.lbl_cancel')}}</a>
            </div>

        </form>
    </div>
@endsection


@section('footer-script')
    <script src="{{asset('vendors/OrgChart/js/jquery.orgchart.min.js')}}"></script>
    <!-- End plugin js for this page -->

    <script type="text/javascript">

        $('body').on('change', 'select[name="location_id"]', function(event) {
            event.preventDefault();
            var form = $('#form');

            PDRequest({
                type    : "GET",
                url     : "{{route('organizational-charts.search.user')}}?location_id="+$(this).val(),
                isFlash : false
            }).then(function(data){

                form.find('[name=user] option').remove();
                form.find('[name=user]').append($('<option>', {
                    value: '',
                    text: ''
                }));
                $.each(data.users, function (i, item) {
                    form.find('[name=user]').append($('<option>', {
                        value: item.id,
                        text: item.display_name
                    }));
                })

            });

        });

        $(".btn-save").on("click", function(event) {
            event.preventDefault();

            if($("#form").valid()){
                data = $('#form').serialize();

                PDRequest({
                    type    : "PUT",
                    url     : $("#form").prop("action"),
                    data    : data,
                    event   : event
                }).then((response) => {
                    if(response.status == "success"){
                        location.href = "{{route('organizational-charts.index')}}";
                    }
                });
            }
        });
    </script>
@stop