@extends('front.layout.master')
@section('content')

    <main class="main-content">
        <div class="profile-wrap">
            <div class="container">
                <div
                        class="profile-cover"
                        style="background-image: url('{{  $data['info']['banner']}}')"
                >
                    <div class="right">
                        <div class="pic">
                            <img src="{{$data['info']['image']}}" alt="profile-picture" />
                        </div>
                        <div class="info">
                            <h3>{{$data['info']['name']}}</h3>
                            <p>{{$data['info']['times']}}</p>
                            <h3>
                                <img src="{{asset('front/images/location.svg')}}" alt="location" />
                                {{$data['info']['branch_name']}}
                            </h3>
                        </div>
                    </div>
                    <div class="left">
                        <div class="status">
                            <i></i>
                            {{$data['info']['status']}}
                        </div>
                        <button
                                type="button"
{{--                                data-bs-target="#reviewModal"--}}
{{--                                data-bs-toggle="modal"--}}
                        >
                            {{ __('main.reviews') }}
                            <b>
                                {{$data['info']['rates']}}
                                <img src="{{asset('front/images/location.svg')}}" alt="star" />
                            </b>
                        </button>
                    </div>
                </div>
                <div class="profile-tabs">
                    <div class="tabs-header">
              <span>
                   {{ __('main.browse_categories') }}<img src="{{asset('front/images/arrow-left.svg')}}" alt="menu" />
              </span>
                        <ul class="nav nav-tabs">
                            @foreach($data['categories'] as $key => $category)
                                  <li class="nav-item">
                                <button class="nav-link {{$key == 0 ? 'active' : ' '}} get_products" data-id="{{$category['id']}}" data-user_id="{{$data['info']['id']}}"  type="button">
                                    {{$category['name']}}
                                </button>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="profile-category-1">
                            <div class="row" id="appenddata">

                            </div>
                        <div class="tab-pane fade" id="profile-category-2"></div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>
{{--    <div class="modal fade" id="reviewModal">--}}
{{--        <div class="modal-dialog modal-dialog-centered">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header">--}}
{{--                    <h4>التعليقات</h4>--}}
{{--                    <button type="button" class="close" data-bs-dismiss="modal">--}}
{{--                        <img src="{{asset('front/images/close-filled.svg ')}}" alt="close" />--}}
{{--                    </button>--}}
{{--                </div>--}}
{{--                <div class="review-list">--}}
{{--                    <ul>--}}
{{--                        @foreach($rates as $rate)--}}
{{--                                <li>--}}
{{--                            <h4>{{$rate['user_name']}}</h4>--}}
{{--                            <span>--}}
{{--                  <img src="{{asset('front/images/message.svg')}}" alt="" />--}}
{{--                  {{$rate['text']}}--}}
{{--                </span>--}}
{{--                            <p>--}}
{{--                                @if($rate['text'] == 1)--}}

{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt=""  class="" />--}}

{{--                                @elseif($rate['text'] == 2)--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt=""  class="" />--}}

{{--                                @elseif($rate['text'] == 3)--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt=""  class="" />--}}

{{--                                @elseif($rate['text'] == 4)--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt=""  class="" />--}}

{{--                                @elseif($rate['text'] == 5)--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt="" class="active" />--}}
{{--                                    <img src="{{asset('front/images/star.svg')}}" alt=""  class="active" />--}}

{{--                                @endif--}}
{{--                            </p>--}}
{{--                        </li>--}}
{{--                        @endforeach--}}

{{--                    </ul>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

@endsection
@push('js')
    <script>
        $(function () {
            // Automatically send request on page load with category_id = 0
            $(document).ready(function() {
                var user_id = $('.get_products').first().data('user_id'); // Get the user ID from the first button or set it manually
                $.ajax({
                    url: "{{route('get_products')}}",
                    method: "get",
                    data: {
                        category_id: 0,  // Send category_id 0
                        user_id: user_id, // Get the user ID from the first button
                    },
                    success: function (response) {
                        $('#appenddata').empty();
                        $('#appenddata').append(response);
                    }
                });
            });

            // Handle click event for other categories
            $('body').on('click', '.get_products', function (e) {
                e.preventDefault();

                var val = $(this).data('id');
                var user_id = $(this).data('user_id');

                $('.get_products').removeClass('active');
                $(this).addClass('active');

                $.ajax({
                    url: "{{route('get_products')}}",
                    method: "get",
                    data: {
                        category_id: val,
                        user_id: user_id,
                    },
                    success: function (response) {
                        $('#appenddata').empty();
                        $('#appenddata').append(response);
                    }
                });
            });
        });
    </script>
@endpush