@extends('admin.layouts.master')
@section('content')
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif     
<div class="card bg-body-white hoverable card-xl-stretch mb-xl-8">	
	<div class="card card-custom">
	<div class="card-header">
		<h3 class="card-title">
			Site Details
		</h3>
		<div class="card-toolbar">
			<div class="example-tools justify-content-center">
				<span class="example-toggle" data-toggle="tooltip" title="View code"></span>
				<span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
			</div>
		</div>
	</div>
	<!--begin::Form-->
	<form class="form" action="{{ route('admin.site-details.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="country_id" class="putCountryId">
        <div class="card-body">
            <div class="form-group">
                <label>Site Title</label>
                <input type="hidden" name="country_id" class="putCountryId">
                <input type="text" name="site_title" class="form-control form-control-solid" placeholder="Enter site title"
                    value="{{ old('site_title', $siteDetails->site_title ?? '') }}" required>
            </div>

            <div class="form-group">
                <label>Site Description</label>
                <textarea name="site_description" class="form-control form-control-solid" placeholder="Enter description" required>{{ old('site_description', $siteDetails->site_description ?? '') }}</textarea>
            </div>

            <div class="form-group">
                <label>Site Logo</label><br>
                @if(!empty($siteDetails->site_logo))
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $siteDetails->site_logo) }}" width="100" alt="Site Logo">
                    </div>
                @endif
                <input type="file" name="site_logo" class="form-control form-control-solid" accept="image/*">
                <span class="form-text text-muted">Upload logo image</span>
            </div>

            <div class="form-group">
                <label>Site Favicon</label><br>
                @if(!empty($siteDetails->site_favicon))
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $siteDetails->site_favicon) }}" width="32" alt="Favicon">
                    </div>
                @endif
                <input type="file" name="site_favicon" class="form-control form-control-solid" accept="image/*">
                <span class="form-text text-muted">Upload favicon image</span>
            </div>

            <div class="form-group">
                <label>Site Tagline</label>
                <input type="text" name="site_tagline" class="form-control form-control-solid" placeholder="Enter site tagline"
                    value="{{ old('site_tagline', $siteDetails->site_tagline ?? '') }}" required>
            </div>
            <div class="form-group">
                <label>Copyright Text</label>
                <input type="text" name="site_copyright_text"
                    class="form-control form-control-solid"
                    placeholder="Enter copyright text"
                    value="{{ old('site_copyright_text', $siteDetails->site_copyright_text ?? '') }}" required>
            </div>
           
            <label>Contact Details</label><a href="javascript:void(0);" id="add-contact-section"><i class="bi bi-plus fw-bolder fa-2x"></i></a>           
            <div class="row m-0 mb-10 p-5 border rounded-3" id="contact-section-wrapper">
                @if(!empty($siteDetails->contact_details))
                    @foreach(json_decode($siteDetails->contact_details, true) as $contact)
                        <div class="row m-0 mb-5 ms-5 p-5 border rounded-3 contact-row col-3">                                
                            <textarea rows="5" name="contact_details[]" class="form-control form-control-solid my-2" placeholder="" required>{{ $contact['contact'] }}</textarea>
                            <input type="text" name="lat[]" value="{{ $contact['lat'] }}" class="form-control form-control-solid my-2" placeholder="Latitude">
                            <input type="text" name="long[]" value="{{ $contact['long'] }}" class="form-control form-control-solid my-2" placeholder="Longitude">
                            <a href="javascript:void(0);" class="remove-contact-section text-danger">
                                <i class="bi bi-dash-circle fa-2x"></i>
                            </a>
                        </div>
                    @endforeach
                @else                    
                    <div class="row m-0 mb-5 ms-5 p-5 border rounded-3 contact-row col-3">                                
                        <textarea rows="5" name="contact_details[]" class="form-control form-control-solid my-2" placeholder="" required></textarea>   
                        <input type="text" name="lat[]" class="form-control form-control-solid my-2" placeholder="Latitude">
                        <input type="text" name="long[]" class="form-control form-control-solid my-2" placeholder="Longitude">                     
                    </div>
                @endif
            </div>
            <div class="form-group">
                <label>Support Email</label>
                <input type="text" name="support_email"
                    class="form-control form-control-solid"
                    placeholder="Enter copyright text"
                    value="{{ old('support_email', $siteDetails->support_email ?? '') }}" required>
            </div>            
            <div class="form-group">
                <label>Status</label>
                <select name="status" class="form-control form-control-solid" required>
                    <option value="1" {{ old('status', $siteDetails->status ?? '') == 1 ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ old('status', $siteDetails->status ?? '') == 0 ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>            
        </div>

        <div class="card-footer">
            <input type="hidden" name="id" value="{{ old('id', $siteDetails->id ?? '') }}">
            <button type="submit" class="btn btn-primary mr-2">Save</button>
            <a type="reset" href="{{route('admin.dashboard')}}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>



	<!--end::Form-->
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const addBtn = document.getElementById("add-contact-section");
    const wrapper = document.getElementById("contact-section-wrapper");

    addBtn.addEventListener("click", function () {
        const html = `
            <div class="row m-0 mb-5 ms-5 p-5 border rounded-3 contact-row col-3">
                <textarea rows="5" name="contact_details[]" class="form-control form-control-solid my-2" placeholder="" required></textarea>
                <input type="text" name="lat[]" class="form-control form-control-solid my-2" placeholder="Latitude">
                <input type="text" name="long[]" class="form-control form-control-solid my-2" placeholder="Longitude">  
                <a href="javascript:void(0);" class="remove-contact-section text-danger">
                    <i class="bi bi-dash-circle fa-2x"></i>
                </a>
            </div>
        `;
        wrapper.insertAdjacentHTML('beforeend', html);
    });

    wrapper.addEventListener("click", function (e) {
        if (e.target.closest(".remove-contact-section")) {
            e.target.closest(".contact-row").remove();
        }
    });
});
</script>
@endsection