@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')

<div class="Add_Project new-member add_brand pt-10">
    <div class="container">
        <h2 class="theme-heading mb-30">
            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->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->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($all_brands['url']))
                            @foreach($all_brands['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 pl-3 add-field btn-add">add_circle</i>
                                @else
                                <i class="material-icons pl-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 pl-3 add-field btn-add">add_circle</i>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="popup-formlbl" for="">Fonts</label>
                            <div class="multi-fields-form w-100">
                                @if(isset($all_brands['fonts']))
                                @foreach($all_brands['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 pl-3 add-field btn-add">add_circle</i>
                                    @else
                                    <i class="material-icons pl-3 add-field btn-remove">remove_circle</i>
                                    @endif
                                </div>
                                @endforeach
                                @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 pl-3 add-field btn-add">add_circle</i>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group pright-40">
                            @php
                                $color_preference = 'hex';
                                if(isset($all_brands['fonts'])){
                                   $color_preference = $all_brands['color_preference']->value ?? "hex";
                                }    
                            @endphp
                            <input type="hidden" name="color_preference" id="color_preference" value="{{$color_preference ?? 'hex'}}">
                            <div class="custom-color">
                                <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>
                                @if(isset($all_brands['fonts']))
                                    @forelse($all_brands['color_code']->decoded_value ?? [] as $key => $color)
                                    <div class="output-outer clone-items color-pref-js @if(!$loop->first) mt-2 @endif">
                                        <div class="output-color">
                                            {{-- <span class="colorCode" style="background:#{{$color ?? ''}}"></span> --}}
                                            <input type="color" class="colorCode mr-2" value="{{$color ?? ''}}" />
                                            <div class="textCode">{{$color ?? ''}}</div> <a href="javascript:void(0);" class="remove-color-js"><i class="material-icons">close</i></a>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <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 pl-3 add-field btn-add">add_circle</i>
                                            @else
                                            <i class="material-icons pl-3 add-field btn-remove">remove_circle</i>
                                            @endif
                                        </div>
                                    </div>
                                    @empty
                                        <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="#" />
                                                <div class="textCode"># 
                                            {{--  <a href="javascript:void(0);" class="remove-color-js"><i class="material-icons text-danger">delete</i></a> --}}
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <input type="text" class="color-text" placeholder="add hex code" name="color_code[]" minlength="6" maxlength="6">
                                                <i class="material-icons pl-3 add-field btn-add">add_circle</i>
                                            </div>
                                        </div>
                                    @endforelse
                                @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="#" />
                                            <div class="textCode"># 
                                        {{--  <a href="javascript:void(0);" class="remove-color-js"><i class="material-icons text-danger">delete</i></a> --}}
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <input type="text" class="color-text" placeholder="add hex code" name="color_code[]" minlength="6" maxlength="6">
                                            <i class="material-icons pl-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 class="col-md-12">
                        <div class="col-md-12">
                            <div class="form-group pright-40">
                                <label class="popup-formlbl" for="">Assign Team Members</label>
                                <div class="select_box ccstum-select">
                                <select name="members[]" class="form-control custm-form-control py-3 cursor-pointer @error('members') is-invalid @enderror" id="brand-assign-members" multiple>
                                    <option value="">Select Members</option>
                                    @foreach ($team_members as $member)
                                        <option value="{{$member->id ?? ''}}">{{$member->full_name ?? ''}}</option>
                                    @endforeach
                                </select>
                                @error('members')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                                </div>
                            </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="" 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 Doc,<span>Docx, Odt, Pdf, Jpg, Png, Jpeg, Psd, Ai, Zip, Mp4, Mov, tiff,
                                    ttf, eps</span></p>
                            </div>
                            @error('brand_logo')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            <ul class="cat-img-listing">
                                @if(isset($all_brands['brand_logo']))
                                @foreach($all_brands['brand_logo']->media ?? [] as $key => $image)
                                <li class="cat-img-listingli" data-id="{{$all_brands['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">
                                            <img src="{{ $image->getUrl() ?? '' }}" class="img-fluid">
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                                @endif
                            </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">
                                @if(isset($all_brands['brand_logo']))
                                @foreach($all_brands['marketing_material']->media ?? [] as $key => $image)
                                <li class="cat-img-listingli" data-id="{{$all_brands['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">
                                            <img src="{{ $image->getUrl() }}" class="img-fluid">
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                                @endif
                            </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="" 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 Doc,<span>Docx, Odt, Pdf, Jpg, Png, Jpeg, Psd, Ai, Zip, Mp4, Mov, tiff,
                                    ttf, eps</span></p>
                            </div>
                            @error('additional_images')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            <ul class="cat-img-listing">
                                @if(isset($all_brands['brand_logo']))
                                @foreach($all_brands['additional_images']->media ?? [] as $key => $image)
                                <li class="cat-img-listingli" data-id="{{$all_brands['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">
                                            <img src="{{ $image->getUrl() }}" class="img-fluid">
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                                @endif
                            </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/select2.min.js') }}"></script>
<script src="{{ asset('assets/front/js/brand-profile.js?v='.time()) }}"></script>
@endsection