@extends('admin.includes.layout')
@section('title', $page_title)
@section('content')
<!-- Page sidebar end-->
<div class="page-body">
   <div class="container-fluid">
      <div class="page-title">
         <div class="row">
            <div class="col-sm-6 col-12">
            </div>
            <div class="col-sm-6 col-12">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{ route('admin') }}"> <i class="fa-solid fa-home me-2"></i></a></li>
                  <li class="breadcrumb-item">{{ $page_title }}</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <!-- Container-fluid starts-->
  
   <div class="container-fluid">
  <div class="row">
    <!-- LEFT PROFILE CARD -->
    <div class="col-md-4 mb-4">
      <div class="card shadow-lg border-0 rounded-3 overflow-hidden">
        <!-- Cover Background -->
        <div style="background: linear-gradient(135deg,#6c5ce7,#00b894); height:100px; position:relative;">
          <div style="position:absolute; bottom:-50px; left:50%; transform:translateX(-50%);">
            <img src="{{ asset($profile->profile_pic ?? '') }}"
                 class="rounded-circle border border-white shadow" style="width:100px; height:100px; object-fit:cover;">
          </div>
        </div>

        <div class="card-body text-center mt-5 pt-4">
          <h4 class="fw-bold text-primary mb-1">{{ $profile->name ?? '' }}</h4>
          <p class="text-muted mb-1"><i class="fas fa-building me-1"></i> {{ $settings->company_name ?? '' }}</p>
          <p class="text-muted small"><i class="fas fa-envelope me-1"></i> {{ $settings->email_id ?? '' }}</p>

          <hr>

          <div class="d-flex justify-content-center gap-3">
            @if(!empty($settings->facebook_link))
            <a href="{{ $settings->facebook_link }}" target="_blank" class="btn btn-primary btn-sm rounded-circle">
              <i class="fab fa-facebook"></i>
            </a>
            @endif
            @if(!empty($settings->twitter_link))
            <a href="{{ $settings->twitter_link }}" target="_blank" class="btn btn-info btn-sm rounded-circle">
              <i class="fab fa-twitter"></i>
            </a>
            @endif
            @if(!empty($settings->instagram_link))
            <a href="{{ $settings->instagram_link }}" target="_blank" class="btn btn-danger btn-sm rounded-circle">
              <i class="fab fa-instagram"></i>
            </a>
            @endif
          </div>
        </div>
      </div>
    </div>

    <!-- RIGHT FORM -->
    <div class="col-md-8">
      <div class="card shadow-lg border-0 rounded-3">
        <div class="card-header bg-light border-bottom-0 py-3 d-flex justify-content-between align-items-center rounded-top">
          <h3 class="mb-0 fw-bold text-primary">{{ $page_title }}</h3>
        </div>
        <div class="border-top"></div>
        <div class="card-body p-4">
          <form id="saveForm" class="theme-form row g-3" enctype="multipart/form-data">
            <input type="hidden" name="id" id="id" value="{{ $profile->id ?? '' }}">
            <input type="hidden" id="old_profile_pic" name="old_profile_pic" value="{{ $profile->profile_pic ?? '' }}">
            @csrf

            <div class="col-md-6">
              <label class="form-label">Name</label>
              <input type="text" class="form-control" name="name" id="name"  value="{{ $profile->name ?? '' }}" placeholder="Enter name">
            </div>

            <div class="col-md-6">
              <label class="form-label">Email</label>
              <input type="email" class="form-control" name="email" id="email" value="{{ $profile->email ?? '' }}" placeholder="Enter email">
            </div>

         


            <div class="col-md-6">
              <label class="form-label">Password</label>
              <input type="text" class="form-control" name="raw_password" id="raw_password" value="{{ $profile->raw_password ?? '' }}" placeholder="Enter password">
            </div>

            <div class="col-md-6">
              <label class="form-label">Profile Pic</label>
              <input type="file" class="form-control" name="profile_pic" id="profile_pic" accept=".jpg,.jpeg,.png" onchange="previewImage(this,'profile_picPreview')">
              <div class="mt-2">
                <img id="profile_picPreview" src="{{ asset($profile->profile_pic ?? '') }}" 
                style="max-height: 100px; {{ !empty($profile?->profile_pic) ? '' : 'display:none;' }}">
            </div>
            <div class="col-12 text-start mt-3">
              <button type="submit"  id="submitBtn" class="btn btn-primary me-2"><i class="fas fa-save"></i> Save</button>
              <button type="reset" class="btn btn-secondary"><i class="fas fa-rotate-left"></i> Reset</button>
            </div>
          </form>
        </div>
      </div>
    </div>

  </div>
</div>


</div>
@endsection
@push('scripts')
<script>
   $(document).ready(function() {
       $('#saveForm').on('submit', function(e) {
        e.preventDefault();
   
        let isValid = true;
        const requiredFields = [
            '#name', 
            '#email',
            '#raw_password',
        ];
   
        requiredFields.forEach(function(sel){
            if($.trim($(sel).val()) === ''){
                toastr.error($(sel).attr('id').replace('_',' ')+' is required');
                isValid = false;
                return false; // break loop
            }
        });
   
        if (!$('#profile_picPreview').attr('src') && !$('#profile_pic')[0].files.length) {
            toastr.error('profile_pic is required');
            isValid = false;
        }
        
        if(!isValid) return;
   
        // build FormData manually
        let formData = new FormData();
        formData.append('_token', $('input[name="_token"]').val());
        formData.append('id', $('#id').val());
        formData.append('name', $('#name').val());  
        formData.append('email', $('#email').val());
        formData.append('raw_password', $('#raw_password').val());
        formData.append('old_profile_pic', $('#old_profile_pic').val());
        // files
        if($('#profile_pic')[0].files.length){
            formData.append('profile_pic', $('#profile_pic')[0].files[0]);
        }
        $.ajax({
            url: '{{ route("profile.save") }}',
            type: 'POST',
            data: formData,
            processData:false,
            contentType:false,
            beforeSend: ()=> $('#submitBtn').prop('disabled',true).text('Processing...'),
            success: function(res){
                if(res.success){
                    toastr.success(res.message || 'Settings saved!');
                    setTimeout(()=> location.reload(),1000);
                } else {
                    toastr.error(res.message || 'Something went wrong');
                }
            },
            error: function(xhr){
                toastr.error(xhr.responseJSON?.message || 'Error occurred');
                console.log(xhr.responseText);
            },
            complete: ()=> $('#submitBtn').prop('disabled',false).text('Save')
        });
    });
   });
</script>
@endpush