@extends('layouts.project-form-base', ['title' => 'Brand Profile', 'formTitle' => 'Add New Brand Profile','back' => 'javascript: history.go(-1)', 'custom_class' => 'add_extended_pro'])
@section('content')
{{-- @section('css')
<style>
    #wrapper {
        padding: 0px;
    }

    .material-icons {
        cursor: pointer !important;
    }

    .custom-color .output-color span {
        background: #fff;
    }
</style>
@endsection --}}

<div class="Add_Project new-member add_brand pt-10">
    <div class="container">
        <h2 class="theme-heading">
            Add New Brand Profile
        </h2>
        <p class="color-gray mb-30">Please fill out the information below to create a brand profile</p>
        @if(isset($brand))
        <form id="brand-profile-create-form" method="POST" action="{{ getRoute('brand_profile.update', $brand->id) }}" enctype="multipart/form-data" class="popup-form">
            @method('PUT')
            @else
            <form id="brand-profile-create-form" method="POST" action="{{ getRoute('brand_profile.store') }}" enctype="multipart/form-data" class="popup-form">
                @endif
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group pright-40">
                            <label class="popup-formlbl" for="">Brand Name *</label>
                            <input type="text" class="form-control custm-form-control @error('title') is-invalid @enderror" placeholder="Enter Brand Name" name="title" value="{{ old('title', $brand->title ?? '') }}">
                            @error('title')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="popup-formlbl" for="">Website URL</label>
                            @if(isset($brand))
                            @foreach($brand->getMetas['url']['decoded_value'] as $key => $url)
                            <div class="websites-js d-flex align-items-center clone-items @if(!$loop->first) mt-2 @endif">
                                <div class="relative-field w-100">
                                    <input type="text" name="url[]" class="brand_website form-control custm-form-control @error('url') is-invalid @enderror" placeholder="Enter Website" value="{{$url ?? ''}}">

                                    <span class="text-uppercase field-status">
                                        <a class="test_website_url" target="_blank" href="{{ strpos($url, 'http') === false ? 'http://' . $url : $url }}">TEST LINK</a>
                                    </span>

                                    @error('url')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                @if($loop->first)
                                <i class="material-icons px-3 add-field btn-add">add_circle</i>
                                @else
                                <i class="material-icons px-3 add-field btn-remove">remove_circle</i>
                                @endif
                            </div>
                            @endforeach
                            @else
                            <div class="d-flex align-items-center clone-items websites-js">
                                <div class="relative-field w-100">
                                    <input type="text" name="url[]" class="form-control custm-form-control @error('url') is-invalid @enderror" placeholder="Enter Website">

                                    <span class="text-uppercase field-status test-url-js d-none">
                                        <a class="test_website_url" target="_blank" href="">TEST LINK</a>
                                    </span>

                                    @error('url')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <i class="material-icons px-3 add-field btn-add">add_circle</i>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="popup-formlbl" for="">Fonts</label>
                            <div class="multi-fields-form w-100">
                                @if(isset($brand))
                                    @forelse($brand->getMetas['fonts']['decoded_value'] as $key => $fonts)
                                        <div class="d-flex align-items-center clone-items @if(!$loop->first) mt-2 @endif">
                                            <div class="relative-field w-100 mb-1">
                                                <input type="text" class="form-control custm-form-control @error('fonts') is-invalid @enderror" name="fonts[]" value="{{ $fonts ?? ''}}" placeholder="Add Fonts...">
                                                @error('fonts')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                            @if($loop->first)
                                            <i class="material-icons px-3 add-field btn-add">add_circle</i>
                                            @else
                                            <i class="material-icons px-3 add-field btn-remove">remove_circle</i>
                                            @endif
                                        </div>
                                    @empty
                                        <div class="d-flex align-items-center clone-items">
                                            <div class="relative-field w-100 mb-1">
                                                <input type="text" class="form-control custm-form-control @error('fonts') is-invalid @enderror" name="fonts[]" placeholder="Add Fonts...">
                                                @error('fonts')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                            <i class="material-icons px-3 add-field btn-add">add_circle</i>
                                        </div>
                                    @endforelse
                                @else
                                    <div class="d-flex align-items-center clone-items">
                                        <div class="relative-field w-100 mb-1">
                                            <input type="text" class="form-control custm-form-control @error('fonts') is-invalid @enderror" name="fonts[]" placeholder="Add Fonts...">
                                            @error('fonts')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <i class="material-icons px-3 add-field btn-add">add_circle</i>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group pright-40">
                            <input type="hidden" name="color_preference" id="color_preference" value="{{$brand->getMetas['color_preference']['value'] ?? 'hex'}}">
                            <div class="d-flex align-items-center justify-content-between">

                                <label class="popup-formlbl" for="">Color preferences</label>
                                <div class="dropdown">
                                    <i class="material-icons" data-toggle="dropdown">more_horiz</i>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item preference" href="javascript:;" data-value="hex">Custom Hex Color codes</a>
                                        <a class="dropdown-item preference" href="javascript:;" data-value="pentone">Pentone Code</a>
                                    </div>
                                </div>
                            </div>
                            <div class="custom-color">

                                @if(isset($brand))
                                @foreach($brand->getMetas['color_code']->decoded_value ?? [] as $key => $color)
                                <div class="color-pref-js output-outer clone-items @if(!$loop->first) mt-2 @endif">
                                    <div class="output-color">
                                        {{-- <span class="colorCode" style="background:#{{$color ?? ''}}"></span> --}}
                                        <input type="color" class="colorCode" value="{{$color ?? ''}}" />
                                        <div class="textCode">{{$color ?? '000000'}}</div> <a href="javascript:void(0);" class="remove-color-js"><i class="material-icons">close</i></a>
                                    </div>
                                    <input type="text" class="color-text" placeholder="add hex code" name="color_code[]" value="{{$color ?? ''}}" minlength="6" maxlength="6">
                                    @if($loop->first)
                                    <i class="material-icons add-field btn-add">add_circle</i>
                                    @else
                                    <i class="material-icons add-field btn-remove">remove_circle</i>
                                    @endif
                                </div>
                                @endforeach
                                @else
                                <div class="output-outer clone-items color-pref-js">
                                    <div class="output-color">
                                        {{-- <span class="colorCode"></span> --}}
                                        <input type="color" class="colorCode mr-2" value="#000000"/>
                                        <div class="textCode">#000000</div> <a href="javascript:void(0);" class="remove-color-js"><i class="material-icons text-danger">delete</i></a>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input type="text" class="color-text" placeholder="add hex code" name="color_code[]" value="#000000" minlength="6" maxlength="6">
                                        <i class="material-icons px-3 add-field btn-add">add_circle</i>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group pright-40">
                            <div class="descr_field">
                                <label class="popup-formlbl">Description *</label>
                                <textarea type="text" class="form-control custm-form-control py-3 @error('description') is-invalid @enderror" name="description" placeholder="Enter Text Here...">{{$brand->brand_description ?? ''}}</textarea>
                                <p>Please provide us as much detail as possible. Include things such as color preferences, styles you like, text you want written on the graphic, and anything else that may help the designer.</p>
                                @error('description')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <h2 class="theme-heading mb-30">
                    Files & Documents
                </h2>
                <div class="row">
                    <div class="col-md-12">
                        <div class="image-uploader form-group pright-40">
                            <label class="popup-formlbl" for=""> Brand Logo </label>
                            <div class="document-atach-file">
                                <input class="form-control custm-form-control valid" type="file" multiple="" accept="image/*" id="add_files" aria-invalid="false" name="brand_logo[]">

                                <i class="material-icons gallery_icon">insert_photo</i>
                                <strong>Drag & drop files here</strong>
                                <span>or <b>browse</b> to choose a file</span>
                                <p>Formats accepted<span>jpg, jpeg, png, gif</span></p>
                            </div>
                            @error('brand_logo')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            <ul class="cat-img-listing">
                                @foreach($brand->getMetas['brand_logo']->media ?? [] as $key => $image)
                                <li class="cat-img-listingli" data-id="{{$brand->getMetas['brand_logo']->id ?? ''}}" data-media="{{$image->id ?? ''}}">
                                    <div class="attachments-image">
                                        <div class="cut-image">
                                            <i class="material-icons text-danger">delete</i>
                                        </div>
                                        <div class="attachment-outer">
                                            @if( strpos($image->mime_type, 'application') > -1 )
                                            <img src="{{ asset('assets/front/images/brand_guide.svg') }}" class="img-fluid">
                                            @else
                                            <img src="{{ $image->getUrl() ?? '' }}" class="img-fluid">
                                            @endif
                                            
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="image-uploader form-group pright-40">
                            <label class="popup-formlbl" for=""> Marketing Material </label>
                            <div class="document-atach-file">
                                <input class="form-control custm-form-control valid" type="file" multiple="" id="add_files" aria-invalid="false" name="marketing_material[]">
                                <i class="material-icons mall_icon">store_mall_directory</i>
                                <strong>Drag & drop files here</strong>
                                <span>or <b>browse</b> to choose a file</span>
                                <p>Formats accepted Doc,<span>Docx, Odt, Pdf, Jpg, Png, Jpeg, Psd, Ai, Zip, Mp4, Mov, tiff,
                                        ttf, eps</span></p>
                            </div>
                            @error('marketing_material')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            <ul class="cat-img-listing">
                                @foreach($brand->getMetas['marketing_material']->media ?? [] as $key => $image)
                                <li class="cat-img-listingli" data-id="{{$brand->getMetas['marketing_material']->id ?? ''}}" data-media="{{$image->id ?? ''}}">
                                    <div class="attachments-image">
                                        <div class="cut-image">
                                            <i class="material-icons text-danger">delete</i>
                                        </div>
                                        <div class="attachment-outer">
                                            @if( strpos($image->mime_type, 'application') > -1 )
                                            <img src="{{ asset('assets/front/images/brand_guide.svg') }}" class="img-fluid">
                                            @else
                                            <img src="{{ $image->getUrl() ?? '' }}" class="img-fluid">
                                            @endif
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="image-uploader form-group pright-40">
                            <label class="popup-formlbl" for=""> Additional Images </label>
                            <div class="document-atach-file">
                                <input class="form-control custm-form-control valid" type="file" multiple="" accept="image/*" id="add_files" aria-invalid="false" name="additional_images[]">
                                <i class="material-icons gallery_icon">insert_photo</i>
                                <strong>Drag & drop files here</strong>
                                <span>or <b>browse</b> to choose a file</span>
                                <p>Formats accepted <span>jpg, jpeg, png, gif</span></p>
                            </div>
                            @error('additional_images')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            <ul class="cat-img-listing">
                                @foreach($brand->getMetas['additional_images']->media ?? [] as $key => $image)
                                <li class="cat-img-listingli" data-id="{{$brand->getMetas['additional_images']->id ?? ''}}" data-media="{{$image->id ?? ''}}">
                                    <div class="attachments-image">
                                        <div class="cut-image">
                                            <i class="material-icons text-danger">delete</i>
                                        </div>
                                        <div class="attachment-outer">
                                            @if( strpos($image->mime_type, 'application') > -1 )
                                            <img src="{{ asset('assets/front/images/brand_guide.svg') }}" class="img-fluid">
                                            @else
                                            <img src="{{ $image->getUrl() ?? '' }}" class="img-fluid">
                                            @endif
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="form-group prevs-next-btn">
                    <a href="javascript:history.go(-1);" class="gz-btn bg-color-default btn-lg">Cancel</a>
                    <button type="submit" class="gz-btn bg-color-red btn-lg ml-15">Save</button>
                </div>
            </form>

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