@extends('Company.layout.master')
@section('title',"Social Link")
@section('page_name',"Social Link")

@push('styles')
    <style>
        /* Professional Floating Label Adjustments */
        .custom-input-group .form-floating {
            flex: 1 1 auto;
        }

        .custom-input-group .form-control:focus {
            box-shadow: none;
            border-color: #dee2e6; /* Keeps it clean */
        }

        .custom-input-group .input-group-text {
            font-size: 1.2rem;
            transition: all 0.3s;
        }

        /* Subtle hover effect for the whole group */
        .custom-input-group:hover .input-group-text {
            background-color: #f8f9fc !important;
        }

        .custom-input-group .form-control {
            border-left: none !important;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{session('success')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
    {{-- 4. Social Links Section --}}
    <div class="mb-4">
        <label class="form-label fw-bold mb-3">
            <i class="bi bi-share me-1 text-primary"></i> Social Media Profiles
        </label>
        <form action="{{route('consultant.social.store')}}" method="post" autocomplete="off">
            @csrf
        <div class="row">
            {{-- Facebook --}}
            <div class="col-md-4 mb-3">
                <div class="input-group custom-input-group">
                <span class="input-group-text bg-white border-end-0" style="color: #1877F2;">
                    <i class="bi bi-facebook"></i>
                </span>
                    <div class="form-floating">
                        <input type="url" class="form-control border-start-0 ps-0" id="facebook" name="facebook"
                               placeholder="Facebook URL" value="{{ $data ? $data->facebook : '' }}">
                        <label for="facebook">Facebook Link</label>
                    </div>
                </div>
                @error('facebook') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            {{-- YouTube --}}
            <div class="col-md-4 mb-3">
                <div class="input-group custom-input-group">
                <span class="input-group-text bg-white border-end-0" style="color: #FF0000;">
                    <i class="bi bi-youtube"></i>
                </span>
                    <div class="form-floating">
                        <input type="url" class="form-control border-start-0 ps-0" id="youtube" name="youtube"
                               placeholder="YouTube URL" value="{{ $data ? $data->youtube : '' }}">
                        <label for="youtube">YouTube Link</label>
                    </div>
                </div>
                @error('youtube') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            {{-- Instagram --}}
            <div class="col-md-4 mb-3">
                <div class="input-group custom-input-group">
                <span class="input-group-text bg-white border-end-0" style="color: #E4405F;">
                    <i class="bi bi-instagram"></i>
                </span>
                    <div class="form-floating">
                        <input type="url" class="form-control border-start-0 ps-0" id="instagram" name="instagram"
                               placeholder="Instagram URL" value="{{ $data ? $data->instagram : '' }}">
                        <label for="instagram">Instagram Link</label>
                    </div>
                </div>
                @error('instagram') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
        </div>
            <div class="d-flex justify-content-center mt-5">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
    </div>
        </form>
    </div>
@endsection

@push('scripts')

@endpush