@php $titlePage = $data->title @endphp
@extends('dashboard.layouts.master')
@section('title')
    {{ $titlePage }}
@stop
@section('content')
    <div class="page-content-wrapper stores">
        <div class="page-content">
            <div class="page-head">
                <div class="page-title">
                    <h1>{{ $titlePage }}</h1>
                </div>
                @permission('delete-stores')
                <a href="javascript:;" title="{{ __('lang.delete') }}" data-id="{{ route('dashboard.stores.products.delete', $data->id) }}" class="red_icon confirmDeleteItem"><i class="icon-trash"></i></a>
                @endpermission

                @permission('update-stores')
                <a class="blue_icon" title="{{ __('lang.edit') }}" href="{{ route('dashboard.stores.products.edit', ['id' => $data->id,'st' => $data->store_id]) }}"><i class="icon-note"></i></a>
                @endpermission
            </div>
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <a href="{{ route('dashboard') }}">{{ __('lang.dashboard') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <a href="{{ route('dashboard.stores') }}">{{ __('lang.stores') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <a href="{{ route('dashboard.stores.products',$data->store_id) }}">{{ __('lang.meals_products') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span class="active">{{ $titlePage }}</span>
                </li>
            </ul>
            <div class="row">
                <div class="col-md-12">
                    {{-- Include Messages Flash --}}
                    @include('includes.flash_msg')
                    <div class="portlet light bordered">
                        <div class="portlet-title tabbable-line">
                            <div class="caption caption-md">
                                <i class="icon-globe theme-font hide"></i>
                                <span class="caption-subject font-blue-madison bold uppercase">{{ __('lang.product_details') }}</span>
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <div class="row">
                                <div class="col-md-12">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a href="#General" data-toggle="tab"> {{ __('lang.general') }} </a>
                                        </li>
                                        <li>
                                            <a href="#Address" data-toggle="tab"> {{ __('lang.images') }} </a>
                                        </li>
                                        <li>
                                            <a href="#StoreTimings" data-toggle="tab"> {{ __('lang.branches') }} </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade active in" id="General">
                                            <div class="col-lg-6">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.store') }}:</strong>
                                                        {{ $data->store->name }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.department') }}:</strong>
                                                        {{ $data->category->title }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.name_meals_products') }}:</strong>
                                                        {{ $data->title }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.desc') }}:</strong>
                                                        {{ $data->description }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.price') }}:</strong>
                                                        {{ $data->price }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.preparation_time') }}:</strong>
                                                        {{ $data->preparation_time }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.quantity') }}: </strong>
                                                        {{ !empty($data->quantity) ? $data->quantity : __('lang.not_found')  }}
                                                    </p>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="tab-pane fade" id="Address">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="display_elem preview_images">
                                                        <p><strong>{{ __('lang.main_image') }}:</strong></p>
                                                        <a href="{{ asset($data->thumbnail) }}" title="{{ __('lang.main_image') }}">
                                                            <img class="storeImg" src="{{ asset($data->thumbnail) }}">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <p><strong>{{ __('lang.images') }}:</strong></p><br>
                                            @foreach($data->images as $item)
                                                <div class="col-md-4">
                                                    <div class="display_elem preview_images">
                                                        <a href="{{ asset($item->image) }}" title="{{ __('lang.image') }}">
                                                            <img class="storeImg" src="{{ asset($item->image) }}">
                                                        </a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="tab-pane fade" id="StoreTimings">
                                            <div class="table-responsive">
                                                <table style="margin-top: 10px;" class="table table-bordered table-striped table-condensed flip-content">
                                                    <thead class="flip-content">
                                                    <tr>
                                                        <th style="width: 100px"> {{ __('lang.branch_number') }} </th>
                                                        <th style="width: 100px"> {{ __('lang.branches') }} </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($data->branch as $key => $get)
                                                        <tr>
                                                            <td>
                                                                {{ $key + 1 }}
                                                            </td>
                                                            <td>
                                                                {{ $get->store->name }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @permission('delete-stores')
    <form id="delete-form" style="display:none;" method="post">@csrf</form>
    @endpermission

    @permission('status-stores')
    <form id="statusForm" style="display:none;" method="post">@csrf</form>
    @endpermission
@stop
@section('css')
    <link href="{{ asset('admin/assets') }}/css/magnific-popup.css" rel="stylesheet" type="text/css" />
@stop
@section('js')
    <script src="{{ asset('admin/assets') }}/js/jquery.magnific-popup.min.js"></script>
    @include('dashboard.setting.map-key')
    <script>
        "use strict";
        let map;
        let lat = parseFloat('{{ $data->lat }}');
        let lng = parseFloat('{{ $data->lng }}');
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: lat,
                    lng: lng
                },
                zoom: 10
            });
            setTimeout(function(){
                if($('#map').find('.dismissButton').length == 1){
                    $('#map').children('div:nth-of-type(2)').remove();
                }
            },1000);
            var marker = new google.maps.Marker({
                position: {
                    lat: lat,
                    lng: lng
                },
                map: map,
            });
        }
        initMap();
    </script>
@stop