@extends('admin.layouts.container')

@section('content')
    <div class="side-title">
        <h3>{{$head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row case_update_form" action="{{$action}}">
            @if($caseRequest ?? ''  && $caseRequest->id)
                @method('PUT')
            @endif
            @csrf

                <div class="form-group col-lg-6">
                    <label>{{ meta('case_no', $lang) ?? __('caseRequests.case_no') }} </label>
                    <input readonly class="form-control bg-white" value='{{$caseRequest->case_no }}'/>
                </div>
                <div class="form-group col-lg-6">
                    <label>{{ meta('request_type', $lang) ?? __('caseRequests.request_type') }} </label>
                    <input readonly class="form-control bg-white" value='{{ __('caseRequests.'.$caseRequest->request_type) }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('name', $lang) ?? __('caseRequests.name') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $caseRequest->name}}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('email', $lang) ?? __('caseRequests.email') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $caseRequest->email }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('phone', $lang) ?? __('caseRequests.phone') }} </label>
                    <input readonly class="form-control bg-white" value='{{ $caseRequest->phone }}'/>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('subject', $lang) ?? __('caseRequests.subject') }} </label>
                    <textarea rows="5" readonly class="form-control bg-white">{{ $topic->name ?? "" }}</textarea>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('requests', $lang) ?? __('caseRequests.requests') }} </label>
                    <textarea rows="5" readonly class="form-control bg-white">{{ $caseRequest->requests ?? "" }}</textarea>
                </div>

                <div class="form-group col-lg-12">
                    <label>{{ meta('details', $lang) ?? __('caseRequests.details') }} </label>
                    <textarea rows="5" readonly class="form-control bg-white">{{ $caseRequest->details ?? "" }}</textarea>
                </div>

                <div class="border-item photos col-md-12 other_image_container">
                    <label>{{ meta('files', $lang) ?? __('caseRequests.files') }} </label>
                    <div class="row">
                        @if ($caseRequest->request_files && is_array($caseRequest->request_files) && count($caseRequest->request_files))
                            @foreach ($caseRequest->request_files as $file)
                                <div class="col-md-4 mb-5">
                                    <div class="items">
                                        <div class="img">
                                            @if(strpos($file, '.pdf'))
                                                <a href="{{ asset($file)}}"><img style="object-fit: contain; padding: 50px;" src="{{asset(strpos($file, '.pdf') ? 'assets/admin/images/file-icon.png' : $file)}}" alt=""></a>
                                            @else
                                                <a href="{{ asset($file)}}" data-fancybox><img src="{{ asset($file)}}" alt=""></a>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <a class="btn btn-success" download href="{{asset($file)}}"><i class="fa fa-download"></i> Download</a>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                <div class="border-item photos case_updates_files col-md-12">
                    <label>{{__('caseRequests.updates_files') }} </label>
                    <div class="row"></div>
                    <div class="text-center">
                        <input id="image_thumbnail" class="image_thumbnail" type="hidden"/>
                        <div class="clearfix"></div>
                        <span class="pick_button" id="add">
                    <a id="lfm" data-cache="photo_gallery" data-title="true" data-url="" data-width="" data-input=".image_thumbnail" data-preview=".image_holder" data-show="" data-hide="" class="lfm add">
                        {{meta('new_item', $lang) ?? 'Add New Item'}}
                    </a>
                </span>
                    </div>
                </div>

            <div class="text-center mt-5 col-12">
                <a href="{{route('caseRequests.index')}}" class="butn case_update_button"><span>{{ __('dashboard.save') }}</span></a>
            </div>
        </form>
    </div>



@endsection

@section('inner_js')
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    {{--    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>--}}
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{url('/')}}/",
            currentLanguage = "{{$lang}}",
            inputName = 'files[]',
            imageTitle = "{{__('caseUpdates.file_name')}}",
            previewUrl = "{{asset('assets/admin/images/file-icon.png')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>

    <script>
        $('.case_update_button').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);
            let form = $('.case_update_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).prop('disabled', false);
                toasterError(response.errors);
            }

            if (response.url) {
                window.location.href = response.url
            }

        });

        $(document).on('click', 'a.close', function () {
            $(this).parents('.items').parent('div').remove();
        });


    </script>


@endsection