@extends('layouts.admin_layout')

@section('Title')
    پنل مدیریت | مدیریت آگهی {{$advertisement_info['title']}}
@endsection

@section('custom-css')
    <link rel="stylesheet" href="{{asset('admin/assets/css/owl.carousel.css')}}">
    <link rel="stylesheet" href="{{asset('admin/assets/css/owl.theme.default.css')}}">

    <style>
        .ad_image_slider {
            background: #f9f9f9;
            padding: 10px;
        }

        .ad_image_slide {
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        .do_full_screen {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #fff;
            width: 30px;
            height: 30px;
            color: #000;
            border: 1px solid #000;
            cursor: pointer;
        }

        .ad_image_slide img {
            width: 100%;
        }

        .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
            font-size: 20pt;
        }

        .owl-theme .owl-dots .owl-dot span {
            width: 15px;
            height: 15px;
        }

        #ImageModalImgTag {
            max-height: 80vh;
            width: auto;
            max-width: 100%;
            margin: 0 auto;
        }
    </style>
@endsection

@section('custom-js')
    <script src="{{asset('admin/assets/js/owl.carousel.js')}}"></script>

    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $('.owl-carousel').owlCarousel({
                    loop: true,
                    rtl: true,
                    margin: 10,
                    nav: true,
                    autoplay: false,
                    autoplayTimeout: 7000,
                    touchDrag: true,
                    mouseDrag: true,
                    navText: [
                        '<button class="clear_btn clear_btn_hover fs-20pt"><i class="fa fa-angle-right"></i></button>',
                        '<button class="clear_btn clear_btn_hover fs-20pt"><i class="fa fa-angle-left"></i></button>'
                    ],
                    items: 1
                })
            }, 500)
        });

        let ImageModal = $("#ImageModal")
        let RemoveImgModal = $("#RemoveImgModal")
        let ChangeStatusModal = $("#ChangeStatusModal")

        function showImageOnModal(src, id) {
            ImageModal.find('#ImageModalImgTag').attr("src", src)
            ImageModal.find('#ImageModalIDInputConfirmation').val(id)
            ImageModal.modal('show')
        }

        function deleteImageConfirmation() {
            ImageModal.modal('hide')
            RemoveImgModal.modal('show')
        }

        function getCities(tag) {
            if ($(tag).val()) {
                let selected_province = $(tag).find('option:selected').val()
                let city_select = $('#city_select')

                city_select.find('option').remove()
                city_select.append('<option value="">همه</option>')
                city_select.attr('disabled', true)

                $.ajax({
                    url: "{{env('DOMAIN_URL') . 'api/v1/public/getCities'}}",
                    type: "post",
                    headers: {
                        Accept: 'application/json'
                    },
                    data: {
                        province_id: selected_province
                    },
                    success: function (response) {
                        if (response.error) {
                            new swal({
                                icon: 'error',
                                title: response.message,
                                toast: true,
                                position: 'top-right',
                                showConfirmButton: false
                            })
                        } else {
                            let option = '';
                            for (let i = 0; i < response.data.cities.length; i++) {
                                option = '<option value="' + response.data.cities[i].id + '">' + response.data.cities[i].name + '</option>'
                                city_select.append(option)
                            }
                        }

                        city_select.attr('disabled', false)
                    }
                });
            }
        }

        function showSetStatusModal(mode) {
            if (mode === 'accept') {
                ChangeStatusModal.modal('show')
                ChangeStatusModal.find('.modal-title').text('تایید آگهی')
                ChangeStatusModal.find('.modal-body').find('p').find('span').text('تایید')
                ChangeStatusModal.find('input.status_id').val(2)
            } else if (mode === 'reject') {
                ChangeStatusModal.modal('show')
                ChangeStatusModal.find('.modal-title').text('رد آگهی')
                ChangeStatusModal.find('.modal-body').find('p').find('span').text('رد')
                ChangeStatusModal.find('input.status_id').val(5)
            } else {
                window.location.reload();
            }
        }
    </script>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="block-header">
            <div class="row clearfix">
                <div class="col-md-6 col-sm-12">
                    <h1>مدیریت آگهی {{$advertisement_info['title']}}</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('admin.dashboard')}}">
                                    پنل مدیریت
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{route('admin.advertisements.waiting.index')}}">
                                    آگهی های در انتظار تایید
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">مدیریت
                                آگهی {{$advertisement_info['title']}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row clearfix justify-content-around">
            <div class="col-12 col-md-6 col-lg-5 col-xl-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row justify-content-between">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <h2 class="fs-10pt d-flex justify-content-between mb-3">
                                            <b class="d-flex">کد اگهی:</b>
                                            <span class="d-flex">{{$advertisement_info['code']}}</span>
                                        </h2>
                                        <h2 class="fs-10pt d-flex justify-content-between mb-3">
                                            <b class="d-flex">دسته بندی:</b>
                                            <span class="d-flex">{{$advertisement_info['categoryInfo']['title']}}</span>
                                        </h2>
                                        <h2 class="fs-10pt d-flex justify-content-between mb-3">
                                            <b class="d-flex">تاریخ ثبت:</b>
                                            <span class="d-flex">{{$advertisement_info['jalali_date']}}</span>
                                        </h2>
                                        <h2 class="fs-10pt d-flex justify-content-between mb-3">
                                            <b class="d-flex">شهر:</b>
                                            <span class="d-flex">{{$advertisement_info['cityInfo']['name']}}</span>
                                        </h2>
                                        <h2 class="fs-10pt d-flex justify-content-between mb-3">
                                            <b class="d-flex">وضعیت:</b>
                                            <span class="d-flex badge border-0 rounded m-0"
                                                  style="background-color: {{$advertisement_info['statusInfo']['bg_color']}};color: {{$advertisement_info['statusInfo']['text_color']}};">{{$advertisement_info['statusInfo']['title']}}</span>
                                        </h2>
                                        <h2 class="fs-10pt d-flex justify-content-between">
                                            <b class="d-flex">تعداد تصاویر:</b>
                                            <span class="d-flex">{{count($images)}}</span>
                                        </h2>
                                    </div>
                                    @foreach($final_fields as $field)
                                        <div class="col-12 mb-4">
                                            <label>{{$field['fieldInfo']['label']}}</label>
                                            @if($field['fieldInfo']['tag'] === 'input')

                                                <input type="text" class="form-control form-control-sm"
                                                       value="{{$field['value']}}">

                                            @elseif($field['fieldInfo']['tag'] === 'textarea')

                                                <textarea rows="10" class="form-control">{{$field['value']}}</textarea>

                                            @elseif($field['fieldInfo']['tag'] === 'select')

                                                <select name="" class="form-control form-control-sm">
                                                    @foreach($field['fieldInfo']['fieldItems'] as $option)
                                                        <option
                                                            @if($field['value'] === $option['value']) selected="selected"
                                                            @endif
                                                            value="{{$option['value']}}">
                                                            {{$option['title']}}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <button onclick="showSetStatusModal('accept')" class="btn btn-sm btn-success w-100">
                                    <i class="fa fa-check"></i>
                                    تایید
                                </button>
                            </div>
                            <div class="col-6">
                                <button onclick="showSetStatusModal('reject')" class="btn btn-sm btn-danger w-100">
                                    <i class="fa fa-times"></i>
                                    رد
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-5 col-xl-6">
                <div class="card">
                    <div class="card-body">
                        <div class="owl-carousel owl-theme ad_image_slider mb-4">
                            @foreach($images as $image)
                                <div class="ad_image_slide">
                                    <img src="{{$image['src']}}">
                                    <button onclick="showImageOnModal('{{$image['src']}}', '{{$image['id']}}')"
                                            class="do_full_screen">
                                        <i class="fa fa-search-plus"></i>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Image Modal -->
        <div class="modal fade" id="ImageModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- Modal body -->
                    <div class="modal-body text-center">
                        <img id="ImageModalImgTag" src="">
                        <input id="ImageModalIDInput" type="hidden">
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-dark" data-dismiss="modal">بستن</button>
                        <button onclick="deleteImageConfirmation()" type="submit" class="btn btn-outline-danger ml-2">
                            حذف تصویر
                        </button>
                    </div>

                </div>
            </div>
        </div>

        <!-- Image Delete Modal -->
        <div class="modal fade" id="RemoveImgModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">حذف تصویر</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <p class="alert alert-danger">
                            آیا از حذف تصویر اطمینان دارید؟
                        </p>
                    </div>

                    <!-- Modal footer -->
                    <form
                        action="{{route('admin.advertisements.waiting.images.delete', ['ad_id' => $advertisement_info['id']])}}"
                        method="post" class="modal-footer">
                        @csrf
                        <input id="ImageModalIDInputConfirmation" type="hidden" name="img_id">
                        <button type="submit" class="btn btn-success">بله مطمئنم</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">خیر</button>
                    </form>

                </div>
            </div>
        </div>

        <!-- Change status Modal -->
        <div class="modal fade" id="ChangeStatusModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title"></h4>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <p class="alert alert-danger">
                            آیا از
                            <span></span>
                            این آگهی اطمینان دارید؟
                        </p>
                    </div>

                    <!-- Modal footer -->
                    <form
                        action="{{route('admin.advertisements.waiting.change_status', ['ad_id' => $advertisement_info['id']])}}"
                        method="post" class="modal-footer">
                        @csrf
                        <input class="status_id" type="hidden" name="status_id">
                        <button type="submit" class="btn btn-success">بله مطمئنم</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">خیر</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection