@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{asset('assets/web/css/case_request_and_updates.css')}}">
@endsection
@section('content')
    <section class="inner_header">
        <img src="{{asset('assets/web/images/icons/inner.svg')}}" alt="" class="inner_shap">
        <div class="container">
            <ul class="links">
                <li>
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}">{{__('main.home')}}</a>
                </li>
                <li>
                    <a href="#"> {{$title}} </a>
                </li>
            </ul>
            <h4>{{$title}}</h4>
        </div>
    </section>

    <section class="consultation-sec section_padding">
        <div class="container">
            @if(count($cases))
                @foreach($cases as $case)
                    <div class="box issue_order mb-3">
                        <div class="issue_head">
                            <div class="row align-items-center">
                                <div class="col-lg-8">
                                    <div class="issue_title">
                                        <h3> <img src="{{asset('assets/web/images/sec_head_sh.svg')}}" alt="" class="me-2">  <span>{{$case->case_subject}}</span> </h3>
                                    </div>
                                </div>
                                <div class="col-lg-4 text-lg-end">
                                    <h5 class="issue_number">{{__('caseRequests.case_no') . ': ' . $case->id}}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="issue_body">
                            <div class="issue_card mb-4">
                                <h5 class="sub_title mb-3">{{__('caseRequests.request_type')}}</h5>
                                <p class="text">{{__('caseRequests.'.$case->request_type)}}</p>
                            </div>
                            <div class="issue_card mb-4">
                                <h5 class="sub_title mb-3">{{__('caseRequests.details')}}</h5>
                                <p class="text">{{$case->details}}</p>
                            </div>
                            <div class="issue_card mb-4">
                                <h5 class="sub_title mb-3">{{__('caseRequests.requests')}}</h5>
                                <p class="text">{{$case->requests}}</p>
                            </div>
                            <div class="issue_card mt-5">
                                <div class="d-flex mb-3 justify-content-between">
                                    <h5 class="sub_title mb-0"> {{__('caseRequests.files')}} </h5>
                                    <a data-form=".update_form_{{$loop->iteration}}" class="butn sub_butn btn-sm add_more_files  px-2 py-2" href="#0"><span>{{__('caseRequests.attachment_more_file')}}</span></a>
                                </div>


                                {{-- Start Add more files block--}}

                                <form class="d-none mt-3 uploadFileForm update_form_{{$loop->iteration}}" action="{{route('cases.updateCaseRequest', $case->id)}}" method="post" enctype="multipart/form-data">
                                    <!--<input multiple type="file" name="files[]">-->
                                    <div class="col-lg-12">
                                        <label class="uploadFile">
                                            <i class="fas fa-file-upload fa-md mr-2"></i>
                                            <span class="filename">{{__('caseRequests.attachment')}}</span>
                                            <input type="file" class="inputfile form-control" name="file" >
                                            <input data-target=".case_file_container_{{$loop->iteration}}" type="submit" class="update_request butn" value="{{__('caseRequests.upload_attachments')}}">
                                        </label>
                                    </div>
                                </form>
                                {{-- End Add more files block--}}

                                <div class="files_sended">
                                    <div class="row case_file_container_{{$loop->iteration}}">
                                        @if(is_array($case->request_files) && count($case->request_files))
                                            @foreach($case->request_files as $requestFile)
                                                @if(strpos($requestFile, '.pdf'))
                                                    <div class="col-lg-3">
                                                        <a download href="{{asset($requestFile)}}" class="img">
                                                            <i class="bi bi-file-pdf fs-5 me-2"></i>
                                                            <h6> {{__('caseRequests.file')}} </h6>
                                                        </a>
                                                    </div>
                                                @else
                                                    <div class="col-lg-3">
                                                        <a href="{{asset($requestFile)}}" class="img" data-fancybox>
                                                            <i class="bi bi-image fs-5 me-2"></i>
                                                            <h6> {{__('caseRequests.image')}} </h6>
                                                        </a>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @else
                                            <div class="alert alert-secondary text-danger text-center">{{__('caseRequests.no_data')}}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                                <div class="issue_card mt-5">
                                    <h5 class="sub_title mb-4">{{__('members.case_updates')}}</h5>
                                    <div class=" issue_updates row">
                                        @if(count($case->caseUpdates))
                                        @foreach($case->caseUpdates as $updatesFile)
                                            <div class="col-lg-3">
                                                <a {{!strpos($updatesFile->file, 'pdf') ? 'download' : 'target="_blank"'}} href="{{asset($updatesFile->file)}}" class="issue_card d-block mb-4">
                                                    <div class="img">
                                                        <img src="{{asset('assets/web/images/documents.png')}}" alt="">
                                                    </div>
                                                    <div class="info">
                                                        <h6>{{$updatesFile->name}}</h6>
                                                        <div class="time mt-3 small">
                                                            <span class="me-3">
                                                                <i class="bi bi-clock me-1 small"></i>
                                                                <span>{{date('h:i A', strtotime($updatesFile->created_at))}}</span>
                                                            </span>
                                                            <span>
                                                                <i class="bi bi-calendar me-1 small"></i>
                                                                <span>{{date('Y M d', strtotime($updatesFile->created_at))}}</span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            @endforeach
                                        @else
                                            <div class="alert alert-secondary text-danger text-center">{{__('caseRequests.no_data')}}</div>
                                        @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                @endforeach
            @else
                <div class="alert alert-secondary text-danger text-center">{{__('caseRequests.no_data')}}</div>
            @endif
        </div>
    </section>

@endsection

@section('inner_js')

    <script>


        $('.update_request').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);
            let form = $(this).parents('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.request_files) {
                form.addClass('d-none');
                toasterSuccess(response.message);
                $(this).prop('disabled', false);
                // for(let i = 0; i < response.new_files.type.length; i++){
                    if(response.type === 'pdf'){
                        $($(this).data('target')).append(`
                        <div class="col-lg-3">
                            <a download href="${response.request_files}" class="img">
                                <i class="bi bi-file-pdf fs-5 me-2"></i>
                                <h6> {{__('caseRequests.file')}} </h6>
                            </a>
                        </div>
                    `)
                    }
                    if(response.type === 'image'){
                        $($(this).data('target')).append(`
                        <div class="col-lg-3">
                            <a href="${response.request_files}" class="img" data-fancybox">
                                <i class="bi bi-image fs-5 me-2"></i>
                                <h6> {{__('caseRequests.image')}} </h6>
                            </a>
                        </div>
                    `)
                    }

                // }
            }
        });

        $('.add_more_files').click(function (e) {
            e.preventDefault();
            $($(this).data('form')).toggleClass('d-none');

        });

        $("input[type=file]").change(function (e) {
            $(this).parents(".uploadFile").find(".filename").text(e.target.files[0].name);
        });


    </script>

@endsection