
@extends("layouts.metor.admin")
@section("content")
@section("title","Add Clients")

<div class="row">
    <div class="col-xl-12 col-lg-12">
        <div class="alert alert-success my-3" style="display:none;" id="success"></div>
        
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Add Clients</h4>
                <a href="javascript:history.back()" class="btn btn-sm btn-light">
                    <i class="ri-arrow-left-line"></i> Back
                </a>
            </div>
            
            <div class="card-body">
                <form accept-charset="utf-8" name="add-form" id="add-form" enctype="multipart/form-data">
                    @csrf
                    <div class="row">


<div class="col-lg-4">
    <div class="mb-3">
        <label class='form-label'>{{ $dbs_clients['name_req'];}}{{ $dbs_clients['name_title']; }}:</label>
        <input type = '{{$dbs_clients['name_html5_type'] }}' name = "name" id = "add-name" autocomplete = 'off' maxlength ='{{  $dbs_clients['name_max'] }}'  value='' @if($dbs_clients['name_html5_req']!='') {{ $dbs_clients['name_html5_req'] }} = {{$dbs_clients['name_html5_req']}} @endif class= 'form-control'  >
        <span class='text-danger' id='add-nameError'></span>
    </div>
</div>


<div class="col-lg-4">
    <div class="mb-3">
        <label class='form-label'>{{ $dbs_clients['owner_name_req'];}}{{ $dbs_clients['owner_name_title']; }}:</label>
        <input type = '{{$dbs_clients['owner_name_html5_type'] }}' name = "owner_name" id = "add-owner_name" autocomplete = 'off' maxlength ='{{  $dbs_clients['owner_name_max'] }}'  value='' @if($dbs_clients['owner_name_html5_req']!='') {{ $dbs_clients['owner_name_html5_req'] }} = {{$dbs_clients['owner_name_html5_req']}} @endif class= 'form-control'  >
        <span class='text-danger' id='add-owner_nameError'></span>
    </div>
</div>


<div class="col-lg-4">
    <div class="mb-3">
        <label class='form-label'>{{ $dbs_clients['email_req'];}}{{ $dbs_clients['email_title']; }}:</label>
        <input type = '{{$dbs_clients['email_html5_type'] }}' name = "email" id = "add-email" autocomplete = 'off' maxlength ='{{  $dbs_clients['email_max'] }}'  value='' @if($dbs_clients['email_html5_req']!='') {{ $dbs_clients['email_html5_req'] }} = {{$dbs_clients['email_html5_req']}} @endif class= 'form-control'   oninput='validateEmailInput(this)' >
        <span class='text-danger' id='add-emailError'></span>
    </div>
</div>


<div class="col-lg-4">
    <div class="mb-3">
        <label class='form-label'>{{ $dbs_clients['phone_req'];}}{{ $dbs_clients['phone_title']; }}:</label>
        <input type = '{{$dbs_clients['phone_html5_type'] }}' name = "phone" id = "add-phone" autocomplete = 'off' maxlength ='{{  $dbs_clients['phone_max'] }}'  value='' @if($dbs_clients['phone_html5_req']!='') {{ $dbs_clients['phone_html5_req'] }} = {{$dbs_clients['phone_html5_req']}} @endif class= 'form-control'  >
        <span class='text-danger' id='add-phoneError'></span>
    </div>
</div>


<div class="col-lg-4">
    <div class="mb-3">
        <label class='form-label'>{{ $dbs_clients['logo_req'];}}{{ $dbs_clients['logo_title']; }}:</label>
        
        <div class="dropzone bg-light-subtle py-4 rounded" id="picture-dropzone-add-logo">
            <div class="fallback">
                <input type="file" id="add-logo" accept='image/*' @if($dbs_clients['logo_html5_req']!='') {{ $dbs_clients['logo_html5_req'] }} = {{$dbs_clients['logo_html5_req']}} @endif onchange="suResizeImage(event,'resized-add-logo','add-logo-filename'); handleImagePreview(event, 'add-logo-preview');" style="display: none;">
            </div>
            <div class="dz-message needsclick text-center" onclick="document.getElementById('add-logo').click();" style="cursor: pointer;" ondrop="event.preventDefault(); handleFileDrop(event, 'add-logo');" ondragover="event.preventDefault();" ondragenter="event.preventDefault(); this.classList.add('border-primary');" ondragleave="this.classList.remove('border-primary');">
                <i class="ri-upload-cloud-2-line fs-48 text-primary"></i>
                <h5 class="mt-3 mb-1">Drop your image here, or <span class="text-primary">click to browse</span></h5>
                <span class="text-muted fs-13">PNG, JPG and GIF files are allowed</span>
            </div>
        </div>
        <div id="add-logo-preview" class="mt-3" style="display: none;">
            <div class="border rounded p-2">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 me-3">
                        <div class="avatar-lg bg-light rounded">
                            <img id="add-logo-preview-img" class="img-fluid rounded d-block" src="#" alt="Preview" style="max-width: 80px; max-height: 80px; object-fit: cover;">
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="fs-14 mb-1" id="add-logo-preview-name">Image Preview</h6>
                        <p class="fs-13 text-muted mb-0">Click above to change image</p>
                    </div>
                    <div class="flex-shrink-0">
                        <button type="button" class="btn btn-sm btn-danger" onclick="clearImagePreview('add-logo', 'add-logo-preview');">
                            <i class="ri-delete-bin-line"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-1 text-muted fs-13">
            @if(!empty($getSettings['allowed_image_formats']))<span>{{ $getSettings['allowed_image_formats'] }}</span>@endif
            @if(!empty($getSettings['max_allowed_image_size']))<span class="@if(!empty($getSettings['allowed_image_formats'])) ms-1 @endif">(max {{ $getSettings['max_allowed_image_size'] }} KB)</span>@endif
        </div>
        <input type='hidden' id='resized-add-logo' name='resized-logo'> 
        <input type='hidden' id='add-logo-filename' name='logo'    value=''> 
        <span class='text-danger' id='add-logoError'></span>
    </div>
</div>


<div class="col-lg-12">
    <div class="mb-3">
        <label class='form-label'>{{ $dbs_clients['address_req'];}}{{ $dbs_clients['address_title']; }}:</label>
        <textarea type = '{{$dbs_clients['address_html5_type'] }}' name = "address" id = "add-address" autocomplete = 'off' maxlength ='{{  $dbs_clients['address_max'] }}' @if($dbs_clients['address_html5_req']!='') {{ $dbs_clients['address_html5_req'] }} = {{$dbs_clients['address_html5_req']}} @endif class= 'form-control'   oninput='updateCharCount(this,"add-addresscharCount")'></textarea>
        <span class='text-danger' id='add-addresscharCount'></span> 
        <span class='text-danger' id='add-addressError'></span>
    </div>
</div>

<div class="col-lg-4">
    <div class="mb-3">
        <label class='form-label'>{{ $dbs_clients['status_req'];}}{{ $dbs_clients['status_title']; }}:</label><br/>
        <div class="mt-2">
            @php
            $options = $dbs_clients['status_array'];
            @endphp

            @foreach ($options as $key => $value)
                @php
                $checked = ($key == 'Active') ? 'checked="checked"' : '';
                @endphp

                <label class="btn btn-outline-primary">
                    <input type="radio" name="status" value="{{ $key }}" id="add-status" {{ $checked }}/> {{ $value }}
                </label>
            @endforeach
        </div>
    </div>
</div>

    
                    </div>
                    

                    <div class="p-3 mb-3 rounded">
                        <div class="row justify-content-end g-2">
                            <div class="col-lg-3">
                                <button type='submit' name='add-submit' id='add-submit' class='btn btn-outline-secondary w-100' data-args1='{{ route("clients.store") }}' data-args2='admin/clients' onclick='addUpdate(event, "add")'>
                                    <i class="ri-save-line"></i> Save 
                                </button>
                            </div>
                            <div class="col-lg-2">
                                <a href="{{ route('clients.index') }}" class="btn btn-primary w-100">
                                    <i class="ri-close-circle-line"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

