@extends('home.layouts.index')

@section('title')
    صفحه ای پروفایل
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('home/css/profile_panel.css') }}">

    <style>
        .nice-select {
            width: 100%;
        }

        .position-relative {
            position: relative;
        }

        #close_alert {
            position: absolute;
            cursor: pointer;
            top: 5px;
            left: 5px;
        }

        .my-2 {
            margin: 2rem 0;
        }
    </style>
@endsection

@section('script')
    <script>
        // Show File Name
        $('#profile_image').change(function () {
            //get the file name
            var fileName = $(this).val();
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(fileName);
        });
        $('#close_alert').click(function () {
            $(this).parent().slideUp();
        })
    </script>
    <script>
        function showDetail(order_id) {
            let modal = $('#ordersDetails-' + order_id);
            modal.modal('show');
        }

        //remove from wishlist
        function RemoveFromProfileWishList(tag, event, productId) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('home.wishlist.remove') }}",
                type: "POST",
                dataType: "json",
                data: {
                    productId: productId,
                    _token: "{{ csrf_token() }}"
                },
                success: function (msg) {
                    if (msg[0] == 'ok') {
                        swal({
                            title: "با تشکر",
                            text: "کالای مورد نظر با موفقیت از لیست علاقه‌مندی های شما حذف شد",
                            icon: "success",
                            timer: 3000,
                        })
                        window.location.reload();
                    }
                },
                error: function () {
                    console.log("something went wrong");
                },
            });
        }

        $('.province-select').change(function () {
            var provinceID = $(this).val();
            if (provinceID) {
                $.ajax({
                    type: "GET",
                    url: "{{ url('/get-province-cities-list') }}?province_id=" + provinceID,
                    success: function (res) {
                        if (res) {
                            $(".city-select").empty();

                            $.each(res, function (key, city) {
                                console.log(city);
                                $(".city-select").append('<option value="' + city.id + '">' +
                                    city.name + '</option>');
                            });

                        } else {
                            $(".city-select").empty();
                        }
                    }
                });
            } else {
                $(".city-select").empty();
            }
        });
    </script>

@endsection

@section('content')
    <main class="main-wrapper">
        <!-- Start Breadcrumb Area  -->
        <div class="axil-breadcrumb-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-8">
                        <div class="inner">
                            <ul class="axil-breadcrumb">
                                <li class="axil-breadcrumb-item"><a href="{{ route('home.index') }}">خانه</a></li>
                                <li class="separator"></li>
                                <li class="axil-breadcrumb-item active" aria-current="page">پروفایل من</li>
                            </ul>
                            <h1 class="title">همه محصولات را کاوش کنید</h1>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-4">
                        <div class="inner">
                            <div class="bradcrumb-thumb">
                                <img src="assets/images/product/product-45.png" alt="Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Breadcrumb Area  -->
        @php
            $user=\Illuminate\Support\Facades\Auth::user();
            $path=public_path(env('USER_IMAGES_UPLOAD_PATH').$user->avatar);
            if (file_exists($path) and !is_dir($path)){
                $src=asset(env('USER_IMAGES_UPLOAD_PATH').$user->avatar);
            }else{
                $src=asset('/home/images/user.png');
            }
        @endphp
            <!-- Start My Account Area  -->
        <div class="axil-dashboard-area axil-section-gap">
            <div class="container">
                <div class="axil-dashboard-warp">
                     @if(!$user->comment)
                    <div role="alert" style="font-size: 22px;padding-right: 478px" class="alert alert-success text-center mb-5 nav nav-tabs">لطفا نظر خود
                        در مورد فن صنعت <a
                                           href="{{ route('home.comments.users_profile.index') }}"
                                            aria-selected="false" style="color: blue;padding-right:10px;padding-left:10px;cursor: pointer">ثبت </a> کنید.
                    </div>
                    @endif
                </div>
                <div class="row">
                    @include('home.sections.profile_sidebar')
                    <div class="col-xl-9 col-md-8">


                            <div class="tab-pane " id="nav-support">
                                <div class="col-lg-9">

                                    <div class="axil-dashboard-account">
                                        <div class="tab-content" id="myaccountContent">
                                            <div class="myaccount-content">
                                                <h3>تیکت‌های من</h3>
                                                <div class="row mb-3">
                                                    <div class="col-12 d-flex justify-content-end">
                                                        <a style="font-size: 19px" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ticket"
                                                        >جدید</a>
                                                    </div>
                                                </div>
                                                @if(count($tickets)>0)
                                                    <div style="margin-top: 25px" class="row">
                                                        <div class="col-12 table-responsive-md">
                                                            <table style="width: 1100px"  class="table table-striped ">
                                                                <thead style="color: white;border-bottom: 2px solid;">
                                                                <tr class="bg-primary">
                                                                    <th class="text-center">ردیف</th>
                                                                    <th class="text-center">عنوان</th>
                                                                    <th class="text-center">وضعیت</th>
                                                                    <th class="text-center">مشاهده</th>
                                                                    <th class="text-center">پاسخ</th>
                                                                    <th class="text-center">شماره تیکت</th>
                                                                    <th class="text-center">تاریخ</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                @foreach($tickets as $key=>$ticket)
                                                                    <tr>
                                                                        <td class="text-center">{{ $tickets->firstItem()+$key }}</td>
                                                                        <td class="text-center">{{ $ticket->title }}</td>
                                                                        <td class="text-center">{{ $ticket->Status->title }}</td>
                                                                        <td class="text-center">
                                                                            <a href="{{ route('home.ticket.show',['ticket'=>$ticket->id]) }}"
                                                                               class="btn btn-sm btn-info text-white">
                                                                                <i style="font-size: 16px" class="fa fa-eye"></i>
                                                                            </a>
                                                                        </td>
                                                                        <td class="text-center">
                                                                            @if($ticket->status_id==3 )
                                                                                <a href="{{ route('home.ticket.show',['ticket'=>$ticket->id]) }}"
                                                                                   class="btn btn-sm btn-danger text-white">
                                                                                    <i style="font-size: 17px" class="fa fa-envelope"></i>
                                                                                </a>
                                                                            @else
                                                                                -
                                                                            @endif
                                                                        </td>
                                                                        <td class="text-center">
                                                                            {{ $ticket->id }}
                                                                        </td>
                                                                        <td class="text-center">{{ verta($ticket->created_at)->format('d - %B - Y') }}</td>
                                                                    </tr>
                                                                @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="row justify-content-center">
                                                                {{ $tickets->render() }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="alert alert-info text-center">
                                                                تا کنون تیکتی ارسال نکرده اید
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif

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


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

        <!-- End My Account Area  -->

        <!-- Start Axil Newsletter Area  -->

        <!-- End Axil Newsletter Area  -->
    </main>
    <div style="border-radius: 20px;
    outline: none;
    border: none;padding: 10px 20px;"  class="modal fade" id="ticket" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div style="margin-bottom: 20px"  class="modal-header">
                    <h1 style="font-size: 19px" class="modal-title " id="staticBackdropLabel">فرم ارسال تیکت</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div style="padding: 15px 20px;" class="modal-body">
                    <form
                        action="{{ route('home.ticket.store') }}"
                        method="POST"
                        enctype="multipart/form-data"
                    >
                        @csrf
                        <div class="row">
                            <div class="form-group col-sm-6">
                                <label style="font-size: 18px;" class="text-right">عنوان</label>
                                <input style="font-size: 18px;" class="form-control" type="text" name="title" id="title" value="{{ old('title') }}">
                                <span class="focus-border"></span>
                            </div>

                            <div class="form-group col-sm-12">
                                <label style="font-size: 18px;" class="text-right">توضیحات</label>
                                <textarea style="font-size: 18px;" class="form-control" rows="5" type="text"  id="description" name="description">{{ old('description') }}</textarea>
                                <span class="focus-border"></span>
                            </div>
                            <div class="col-sm-12 mt-3">
                                <div class="input-group mb-3">
                                    <div class="custom-file">
                                        <input style="font-size: 20px" type="file" class="form-control custom-file-input" name="file" id="file">
                                        <label  class="custom-file-label" for="file">Choose file</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="d-flex">
                                    <button style="font-size: 20px;" type="submit" class="btn btn-success">ارسال</button>
                                    <button style="font-size: 20px;margin-right: 10px" type="button" data-bs-dismiss="modal"  class="btn btn-outline-danger">
                                        بستن
                                    </button>
                                </div>
                            </div>

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

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

@endsection