@extends('layouts.public-base', ['title' => 'Brand Profile', 'contentwrapper' => ''])
@section('content')
    <div id="">
        <!----------Page content----------->

        <div class="custom-container py-3 pr-md-5">
            @include('inc.flashMessages')

            <div class="rb-heading">
                <h2 class="font-size-28">Brand Profile</h2>
            </div>
            <div class="brand_profile">
                <div class="brand_filter_bar align-items-center justify-content-between">
                    <div class="fdt-title">
                        <h2>Brand Profile List</h2>
                    </div>
                </div>
                <div class="row items-row">
                    <div class="col-lg-3 col-md-6 mb-35">
                        <a href="{{ getRoute('brand_profile.create') }}">
                            <div class="add_new_brand d-flex flex-column justify-content-center align-items-center"
                                style="height: 290px;">
                                <i class="material-icons">add_circle</i>
                                <p class="mb-0">Add New Brand Profile</p>
                            </div>
                        </a>
                    </div>
                    @foreach ($brands as $key => $brand)
                     
                        <div class="col-lg-3 col-md-6 mb-4 item-div">
                            <div class="single-team brand-profile-card cursor-pointer show_brand_detail">
                                <div class="team-card-options">
                                        <ul class="hide-action-icon">
                                            <a class="show_brand_detail" href="javascript:void(0)"
                                                data-brand-id="{{ $brand->id }}" data-toggle="modal"
                                                data-target="#b_profile"> <i
                                                    class="material-icons color-gray" data-toggle="tooltip" data-placement="top" title="View">visibility</i></a>

                                            <a class=""
                                                href="{{ getRoute('brand_profile.edit', $brand->id) }}"> <i
                                                    class="material-icons color-gray" data-toggle="tooltip" data-placement="top" title="Edit">create</i></a>

                                            <a class=""
                                                href="{{ getRoute('brand_profile.destroy', $brand->id) }}"
                                                onclick="event.preventDefault(); confirmSwalAlert(null).then((willDelete) => { if(willDelete) {  document.getElementById('delete-form{{ $brand->id }}').submit(); } })">
                                                <i class="material-icons color-gray" data-toggle="tooltip" data-placement="top" title="Delete">delete</i> </a>

                                            <form class="delete_brand_form" id="delete-form{{ $brand->id }}"
                                                action="{{ getRoute('brand_profile.destroy', $brand->id) }}"
                                                method="POST">
                                                @method('DELETE')
                                                @csrf
                                            </form>
                                        </ul>
                                        <!-- <div class="dropdown">
                                            <button type="button" class="" data-toggle="dropdown">
                                                <i class="material-icons">more_horiz</i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item show_brand_detail" href="javascript:void(0)"
                                                    data-brand-id="{{ $brand->id }}" data-toggle="modal"
                                                    data-target="#b_profile"> <i
                                                        class="material-icons align-middle">visibility</i> Show</a>

                                                <a class="dropdown-item"
                                                    href="{{ getRoute('brand_profile.edit', $brand->id) }}"> <i
                                                        class="material-icons align-middle">create</i> Edit</a>

                                                <a class="dropdown-item "
                                                    href="{{ getRoute('brand_profile.destroy', $brand->id) }}"
                                                    onclick="event.preventDefault(); confirmSwalAlert(null).then((willDelete) => { if(willDelete) {  document.getElementById('delete-form{{ $brand->id }}').submit(); } })">
                                                    <i class="material-icons align-middle">delete</i> Delete</a>

                                                <form class="delete_brand_form" id="delete-form{{ $brand->id }}"
                                                    action="{{ getRoute('brand_profile.destroy', $brand->id) }}"
                                                    method="POST">
                                                    @method('DELETE')
                                                    @csrf
                                                </form>
                                            </div>
                                        </div> -->
                                    </div>

                                <div class="single-team-data show_brand_detail" data-brand-id="{{ $brand->id }}" data-toggle="modal" data-target="#b_profile">

                                 @if(in_array(pathinfo($brand->media_url, PATHINFO_EXTENSION), $imgExtensions))
                                    <img class="team-img" src="{{ $brand->media_url ?? '' }}">
                                 @else
                                    <img src="{{asset('assets/front/images/brand_guide.svg')}}" class="team-img">
                                 @endif
                                    {{-- <img class="team-img" src="{{ $brand->media_url ?? '' }}"> --}}

                                    <h5 class="one-line mt-4 mb-2">{{ $brand->title ?? '' }}</h5>

                                    @if ($brand->get_brand_meta('url'))
                                        <p class="my-2 color-gray">
                                            @if (is_array($brand->get_brand_meta('url')))
                                                @foreach ($brand->get_brand_meta('url')  as $key => $url)
                                                {{ $url ?? '' }}
                                                @endforeach
                                            @else
                                                {{ $url ?? '' }}
                                            @endif
                                        </p>
                                    @endif
                                    <ul class="brand_circle_group d-flex justify-content-center mt-3">
                                        {{-- <li class="red"></li>
                                        <li class="orange"></li>
                                        <li class="dark-gray"></li>
                                        <li class="light-gray"></li> --}}
                                        @foreach ($brand->getMetaValue('color_code')->decoded_value ?? [] as $key => $color)
                                            <li style="background: {{ $color ?? '' }}"></li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row">
                    @if( $brands->hasMorePages() )
                        <a id="load-more" href="{{ $brands->nextPageUrl() }}" class="btn gz-btn bg-color-red m-auto">Load more</a>
                    @endif
                </div>
            </div>
        </div>
        <div class="page-footer">
            <div class="container">
                <div class="row">
                    <div class="copy-right col-md-12 text-center">
                        <p>© 2024 | All Rights Reserved</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- modal brand profile -->
    <div class="modal cus_mdal_wdth" id="b_profile">

    </div>
    <!-- modal brand profile -->

    @include('inc.logo-loader')

@endsection

@section('script')
    <script src="{{ asset('assets/front/js/brand-profile.js?v='.time()) }}"></script>
@endsection