@extends('layouts.app')
@section('content')

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

        <form id="form" name="chart-form" action="{{ route('organizational-charts.index') }}" method="POST">
            <div class="tw-card">
                <div class="p-6">
                    <div class="w-full flex flex-col gap-4">
                        <input name="_token" type="hidden" value="{{ csrf_token() }}">
                        <input name="_method" type="hidden" value="{{ isset($item) ? 'PUT' : 'POST' }}">

                        <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=""
                                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 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"
                                    id="title" name="title" maxlength="1000" placeholder="{{ __('forms.lbl_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>
                                </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 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.name
                    }));
                })

            });

        });

        $(".btn-save").on("click", function(event) {
            event.preventDefault();
            if ($("#form").valid()) {
                data = $('#form').serialize();

                PDRequest({
                    type: "POST",
                    url: $("#form").prop("action"),
                    data: data,
                    event: event
                }).then((response) => {
                    if (response.status == "success") {
                        location.href = response.redirect;
                    }

                });
            }
        });
    </script>

@stop