@extends('layouts.main',['title'=>'Application Summery'])

@section('content')
<section class="mt-4">
    <div class="main-card">
        <div class="form-container mt-3">
            <button class="back-btn d-flex align-items-center justify-content-center">
                <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.93429L2.2915 6L6 2.06571L4.8583 0.857143L-2.24801e-07 6L4.8583 11.1429L6 9.93429Z" fill="black"/>
                </svg>
            </button>
            
            <div class="row mt-4 pb-2">
                <div class="col-md-10">
                    <h2>Application Summary</h2>
                    <p class="font-14 m-0 mt-2">Personal Information</p>
                    <div class="table-container overflow-auto mt-4 me-md-4 ">
                        <table class="table m-0">
                            <thead>
                                <tr class="font-10 ">
                                    <th class="fw-regular">First Name</th>
                                    <th class="fw-regular">Last Name</th>
                                    <th class="fw-regular">Phone Number</th>
                                    <th class="fw-regular">Email Address</th>
                                    <th class="fw-regular">Address</th>
                                </tr>
                            </thead>
                            <tbody class="font-12 fw-regular">
                                <tr>
                                    <td>{{ $first_name }}</td>
                                    <td>{{ $last_name }}</td>
                                    <td>{{ $member->cbmPhone }}</td>
                                    <td>{{ $member->cbmEmail }}</td>
                                    <td>
                                        @php
                                            $address = null;
                                            if(isset($member->address) && !empty($member->address)) {
                                                $address = $member->address->cbaAddressLine1 . ', ' . $member->address->cbaAddressLine2 . ', ' . $member->address->cbaCity . ', ' . $member->address->cbaState . ', ' . $member->address->cbaCountry;
                                            }

                                            echo $address;
                                        @endphp
                                        <!-- Block - 34, Street No. 12, New York, America -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4">
                    <div class="application-photo h-100 position-relative">
                        <img class="w-100 h-100 img-fluid" src="{{ !empty($member->photo_public_path) ? $member->photo_public_path : asset('images/application-img.svg') }}" alt="">
                        <div class="application-photo-blue position-absolute d-flex align-items-center justify-content-center">
                            <img src="{{ asset('images/blue-star.svg') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-container overflow-auto mt-4 ">
                <div class="product-info d-flex align-items-center justify-content-between gap-2 p-2 ps-3">
                    <h5 class="fw-regular">Product Information</h5>
                    <div class="add-product-btn">
                        <a class="d-flex fw-regular font-12 align-items-center gap-2 p-3 text-decoration-none" href="{{ route('product.create') }}">
                            <span>
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.99999 5.66666V10.3333M10.3333 7.99999H5.66666" stroke="#141B34" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M15 8C15 4.134 11.866 1 8 1C4.134 1 1 4.134 1 8C1 11.866 4.134 15 8 15C11.866 15 15 11.866 15 8Z" stroke="#141B34"/>
                                </svg>
                            </span>
                            Add a Product
                        </a>
                    </div>
                </div>
                <div class="">
                    <table class="table m-0 product-table">
                        <thead>
                            <tr class="font-10 fw-regular">
                                <th class="fw-regular">Product Name</th>
                                <th class="fw-regular">Short Description</th>
                                <th class="fw-regular">Product URL</th>
                                <th class="fw-regular">Product Category</th>
                                <th class="fw-regular">Brand Allocation</th>
                                <th scope="col" colspan="2" class="fw-regular ">Price</th>
                            </tr>
                        </thead>
                        <tbody class="font-12 fw-regular">
                            @foreach($member->products as $product)
                                <tr>
                                    <td class="prduct-row px-3 py-2 d-flex align-items-center gap-3">
                                        <span>
                                            @php
                                                $prod_img = $product->images->first();
                                                $prod_img = ($prod_img) ? $prod_img->public_path : asset('images/handshake.png');
                                            @endphp
                                            <img class="img-fluid rounded-circle" src="{{ $prod_img }}" alt="" srcset="" />
                                        </span>
                                        {{ $product->cbpName }}
                                    </td>
                                    <td>{{ $product->cbpShortDescription }}</td>
                                    <td>{{ $product->cbpUrl }}</td>
                                    <td>{{ $product->type->cbptName }}</td>
                                    <td class="brand-row px-3 py-2">
                                        <a class="d-flex fw-regular align-items-center gap-2 px-3 py-2 rounded-pill text-decoration-none background-color" href="#">
                                            <span>
                                                <img src="{{ asset('images/green-arrow-icon.svg') }}" alt="" srcset="" />
                                            </span>
                                            Band
                                        </a>
                                    </td>
                                    <td>${{ $product->cbpPrice }}</td>
                                    <td class="text-grey">
                                        <div class="dropdown">
                                            <a href="javascript:void(0);" class="dropdown-trigger" data-bs-toggle="dropdown" data-bs-container="body">
                                                <svg width="16" height="4" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <rect width="4" height="4" rx="2" fill="#DFDFDF" />
                                                    <rect x="6" width="4" height="4" rx="2" fill="#DFDFDF" />
                                                    <rect x="12" width="4" height="4" rx="2" fill="#DFDFDF" />
                                                </svg>
                                            </a>
                                            <ul class="dropdown-menu dropdown-menu-end p-0">
                                                <li><a class="dropdown-item font-12 py-2 px-3" href="{{env('CB_MAIN_APP_URL')}}/download-stamp/{{ $product->member->usID }}/{{ $product->cbpID }}"">Download Stamp Logo</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row powerd-content align-items-center mt-4">
                <div class="col-6">
                    <p class="font-10 m-0">Powered By Axencis</p>
                </div>
                <div class="col-6">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection