@extends('incharge.layout.page-app')
@section('page_title', __('label.request_details'))
@section('tab_title', __('label.request_details'))

@section('content')
    @include('incharge.layout.sidebar')

    <div class="right-content">
        @include('incharge.layout.header')

        <!-- Select2 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />

        <div class="body-content">
            <!-- mobile title -->
            <h1 class="page-title-sm">{{__('label.request_details')}}</h1>

            <div class="border-bottom row mb-3">
                <div class="col-sm-10">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('incharge.dashboard') }}">{{__('label.dashboard')}}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('incomplaint.index') }}">{{__('label.requests')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('label.request_details')}}</li>
                    </ol>
                </div>
                <div class="col-sm-2 d-flex align-items-center justify-content-end">
                    <a href="{{ route('incomplaint.index') }}" class="btn btn-default mw-120" style="margin-top:-14px">{{__('label.requests')}}</a>
                </div>
            </div>

            <form id="update_complaint" enctype="multipart/form-data">
                <input type="hidden" name="id" value="{{ $complaint_id }}">                
                <div class="row">
                    <div class="col-6">
                        <div class="card custom-border-card">
                            <div class="card-body">
                                <table class="table text-center table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>{{__('label.user')}}</td>
                                            <td>{{ $complaint['user']['user_name'] ?? '-'}}</td>
                                        </tr>
                                        <tr>
                                            <td>{{__('label.service')}}</td>
                                            <td>{{ $complaint['service']['name'] ?? '-'}}</td>
                                        </tr>
                                        <tr>
                                            <td>{{__('label.address')}}</td>
                                            <td>
                                                {{ $complaint['address'] ?? '-'}},
                                                {{ $complaint['area'] ?? '-'}},<br>
                                                {{ $complaint['city'] ?? '-'}},
                                                {{ $complaint['state'] ?? '-'}},<br>
                                                {{ $complaint['country'] ?? '-'}},
                                                {{ $complaint['pincode'] ?? '-'}},
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>{{__('label.request_info')}}</td>
                                            <td>{{ $complaint['complaint_info'] ?? '-'}}</td>
                                        </tr>
                                        <tr>
                                            <td>{{__('label.request_reply')}}</td>
                                            <td>{{ $complaint['complaint_reply'] != "" ? $complaint['complaint_reply'] : '-'}}</td>
                                        </tr>
                                        <tr>
                                            <td>{{__('label.total_like')}}</td>
                                            <td><b>{{ $complaint['total_like'] ?? 0 }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>{{__('label.total_dislike')}}</td>
                                            <td><b>{{ $complaint['total_dislike'] ?? 0}}</b></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card custom-border-card">
                            <div class="card-body">
                                <table class="table table-bordered">
                                    <tbody>
                                        <td><b>{{__('label.sub_in_charge')}}</b></td>
                                            <td>
                                                <select class="form-control" name="sub_in_charge_id" id="sub_in_charge_id">
                                                    <option value="0">{{__('label.select_sub_incharge')}}</option>
                                                    @foreach ($sub_in_charge as $key => $value)
                                                        <option value="{{$value->id}}" {{ $complaint->sub_in_charge_id == $value->id ? 'selected' : ''}}>
                                                            {{ $value->full_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        <tr>
                                            <td><b>{{__('label.status')}}<b></td>
                                            <td>
                                                <select class="form-control" name="status" id="complaint_status">
                                                    <option value="1" {{ $complaint->status == 1 ? 'selected' : ''}}>{{__('label.open')}}</option>
                                                    <option value="2" {{ $complaint->status == 2 ? 'selected' : ''}}>{{__('label.in_progress')}}</option>
                                                    <option value="3" {{ $complaint->status == 3 ? 'selected' : ''}}>{{__('label.archived')}}</option>
                                                    <option value="4" {{ $complaint->status == 4 ? 'selected' : ''}}>{{__('label.completed')}}</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="form-row complaint_status">
                                    <input type="hidden" name="old_hashtag_id" value="{{$complaint['hashtag_id']}}">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>{{__('label.request_reply')}}</label>
                                            <textarea name="request_reply" rows="2" class="form-control" placeholder="{{__('label.description_here')}}">{{$complaint['complaint_reply']}}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="form-group">
                                            <label>{{__('label.hashtag')}}</label>
                                            <input name="hashtag" class="form-control" value="{{$complaint['hashtag']}}" placeholder="Entere HashTag (Ex:-#Happy#Water#Save)">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="border-top pt-3 text-right">
                            <button type="button" class="btn btn-default mw-120" onclick="update_complaint()">{{__('label.update')}}</button>
                            <a href="{{route('incomplaint.index')}}" class="btn btn-cancel mw-120 ml-2">{{__('label.cancel')}}</a>
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        </div>
                    </div>
                </div>
            </form>

            <!-- <div class="card custom-border-card mt-4 complaint_status">
                <h5 class="card-header">Complaint After Image</h5>
                <div class="card-body">
                    <form id="complaint_image" enctype="multipart/form-data">
                        <div class="row col-12 after-add-more">
                            <input type="hidden" name="complaint_id" value="{{ $complaint_id }}">
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label>{{__('label.image')}}<span class="text-danger">*</span></label>
                                    <input type="file" name="image[]" class="form-control import-file social_img" id="social_img" accept=".png, .jpg, .jpeg">
                                </div>
                                <div class="form-group col-md-3">
                                    <div class="custom-file">
                                        <img src="{{asset('assets/imgs/upload_img.png')}}" style="height: 90px; width: 90px;" class="img-thumbnail" id="link_img_social_img">
                                    </div>
                                </div>
                                <div class="col-xl-1 col-md-3 mt-2">
                                    <div class="flex-grow-1 d-inline-flex">
                                        <div class="change mr-3 mt-4" id="add_btn">
                                            <a class="btn btn-success add-more text-white" onclick="add_more_link()">+</a>
                                        </div>
                                    </div>
                                </div>
                            </div>       
                        </div>
                        <div class="border-top pt-3 text-right">
                            <button type="button" class="btn btn-default mw-120" onclick="complaint_after_image()">{{__('label.save')}}</button>
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        </div>
                    </form>
                </div>
            </div> -->
            <div class="row">
                <div class="col-6">
                    <div class="card custom-border-card mt-3">
                        <h5 class="card-header">{{__('label.request_before_image')}}</h5>
                        <div class="card-body">
                            <div class="row">
                                @foreach ($image_before as $value)
                                <div class="col-12 col-sm-6 col-md-4 col-xl-6">
                                    <div class="card video-card">
                                        <div class="position-relative">
                                            @if($value->content_type == 1)
                                                <img height="180px" width="180px"  class="card-img-top" src="{{$value->content_url}}" alt="" onclick="openImageModal('{{$value->content_url}}')">
                                            @elseif($value->content_type == 2) 
                                                <img height="180px" width="180px"  class="card-img-top"  src="{{$value->thumbnail_image}}" alt="">
                                                <button class="btn play-btn-top video" data-toggle="modal" data-target="#videoModal" data-video="{{$value->content_url}}" data-image="{{$value->thumbnail_image}}">
                                                    <i class="fa-regular fa-circle-play text-white fa-4x mr-2 mt-2"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card custom-border-card mt-3">
                        <h5 class="card-header">{{__('label.request_after_image')}}</h5>
                        <div class="card-body">
                            <div class="row">
                                @foreach ($image_after as $value)
                                <div class="col-12 col-sm-6 col-md-4 col-xl-6">
                                    <div class="card video-card">
                                        <div class="position-relative">
                                            @if($value->content_type == 1)
                                                <img height="180px" width="180px"  class="card-img-top" src="{{$value->content_url}}" alt="" onclick="openImageModal('{{$value->content_url}}')">
                                            @elseif($value->content_type == 2) 
                                                <img height="180px" width="180px"  class="card-img-top"  src="{{$value->thumbnail_image}}" alt="">
                                                <button class="btn play-btn-top video" data-toggle="modal" data-target="#videoModal" data-video="{{$value->content_url}}" data-image="{{$value->thumbnail_image}}">
                                                    <i class="fa-regular fa-circle-play text-white fa-4x mr-2 mt-2"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="videoModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-body p-0 bg-transparent">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true" class="text-dark">&times;</span>
                                </button>
                                <video controls width="800" height="500" preload='none' poster="" id="theVideo" controlsList="nodownload noplaybackrate" disablepictureinpicture>
                                    <source src="">
                                </video>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Image Modal -->
                <div class="modal fade" id="imageModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-body p-0 bg-transparent">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeImageModal()">
                                    <span aria-hidden="true" class="text-dark">&times;</span>
                                </button>
                                <img src="" id="modalImage" style="width: 800px; height: 500px;" class="img-fluid" alt="Modal Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('pagescript')
    <!-- Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script>
        // Sidebar Scroll Down
        sidebar_down(480);
        $("#sub_in_charge_id").select2();
        
        function openImageModal(imageSrc) {
            $('#modalImage').attr('src', imageSrc); // Set image source in modal
            $('#imageModal').modal('show'); // Show the modal
        }

        function closeImageModal() {
            $('#imageModal').modal('hide'); // Hide the image modal
        }

        $(function() {
            $(".video").click(function() {
                var theModal = $(this).data("target"),
                    videoSRC = $(this).attr("data-video"),
                    videoPoster = $(this).attr("data-image"),
                    videoSRCauto = videoSRC + "";

                $(theModal + ' source').attr('src', videoSRCauto);
                $(theModal + ' video').attr('poster', videoPoster);
                $(theModal + ' video').load();
                $(theModal + ' button.close').click(function() {
                    $(theModal + ' source').attr('src', videoSRC);
                });
            });
        });
        $("#videoModal .close").click(function() {
            theVideo.pause()
        });

        $(document).ready(function() {
            let Status = "<?php echo $complaint['status']; ?>";
            $('.complaint_status').hide();
            if (Status == 4) {
                $('.complaint_status').show();
            }

            $('#complaint_status').change(function() {
                status = $(this).val();

                $('.complaint_status').hide();
                if (status == 4) {
                    $('.complaint_status').show();
                }
            });
        });

		function update_complaint(){

            var Demo_Mode = '<?php echo Demo_Mode(); ?>';
            if(Demo_Mode == 1){

                $("#dvloader").show();
                var formData = new FormData($("#update_complaint")[0]);
               
                $.ajax({
                    type:'POST',
                    url:'{{ route("incomplaint.details.update") }}',
                    data:formData,
                    cache:false,
                    contentType: false,
                    processData: false,
                    success:function(resp){
                        $("#dvloader").hide();
                        get_responce_message(resp, 'update_complaint', '{{ route("incomplaint.details", [$complaint_id]) }}');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $("#dvloader").hide();
                        toastr.error(errorThrown, textStatus);
                    }
                });
            } else {
                showError();
            }
        }

        $(document).on('change', '.social_img', function(){
            readURL(this, this.id);
        });
        function readURL(input, id) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                 
                reader.onload = function (e) {
                    $('#link_img_'+id).attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        var i = -1;
        function add_more_link(){
            var data = `
                <div class="social_part">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label>{{__("label.image")}}<span class="text-danger">*</span></label>
                            <input type="file" name="image[]" class="form-control import-file social_img" id="social_img_${i}" accept=".png, .jpg, .jpeg">
                        </div>
                        <div class="form-group col-md-3">
                            <div class="custom-file">
                                <img src="{{asset("assets/imgs/upload_img.png")}}" style="height: 90px; width: 90px;" class="img-thumbnail" id="link_img_social_img_${i}">
                            </div>
                        </div>
                        <div class="col-xl-1 col-md-3 mt-2">
                            <div class="flex-grow-1 d-inline-flex">
                                <div class="change mr-3 mt-4" id="add_btn">
                                    <a class="btn btn-danger add-more text-white remove_link">-</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;

            $('.after-add-more').append(data);
            i--;
            $("html, body").animate({ scrollTop: $(document).height() }, "slow");
        }
        $("body").on("click", ".remove_link", function(e) {
            $(this).parents('.social_part').remove();
        });
        function complaint_after_image() {
            var Demo_Mode = '<?php echo Demo_Mode(); ?>';
            if (Demo_Mode == 1) {

                var formData = new FormData($("#complaint_image")[0]);
                console.log(formData);
                $("#dvloader").show();
                $.ajax({
                    type: 'POST',
                    url: '{{ route("incomplaint.image.save") }}',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(resp) {
                        $("#dvloader").hide();
                        get_responce_message(resp, 'complaint_image', '{{ route("incomplaint.details", [$complaint_id]) }}');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $("#dvloader").hide();
                        toastr.error(errorThrown, textStatus);
                    }
                });
            } else {
                showError();
            }
        }
    </script>
@endsection