@extends('layouts.admin')
@section('title') Manage Settings @endsection
@section('content')
<div class="row">
	<form enctype="multipart/form-data" method="post" action="{{ route('admin.update-settings') }}">
		<div class="col-md-12 mb-5">
			<div class="bg-white card-box border-20 mb-5">
				<h6><i class="fa-regular fa-envelope"></i> SMTP Settings</h6><hr>
				@csrf
				<div class="row">
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Mail Host:</label>
							<input class="form-control" name="smtp_host" value="{{ $settings->smtp_host }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Mail Port:</label>
							<input class="form-control" name="smtp_port" value="{{ $settings->smtp_port }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Mail Username:</label>
							<input class="form-control" name="smtp_username" value="{{ $settings->smtp_username }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Mail Password:</label>
							<input class="form-control" name="smtp_password" value="{{ $settings->smtp_password }}" required>
						</div>
					</div>
					<div class="col-md-12">
						<div class="dash-input-wrapper mb-30">
							<label>Support Email:</label>
							<input class="form-control" name="support_email" value="{{ $settings->support_email }}" required>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-regular fa-coins"></i> Currency Settings</h6><hr>
				<div class="row">
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Currency Symbol:</label>
							<input class="form-control" name="currency_symbol" value="{{ $settings->currency_symbol }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Currency Code:</label>
							<input class="form-control" name="currency_code" value="{{ $settings->currency_code }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Stripe Publishable KEY:</label>
							<input class="form-control" name="stripe_publishable_key" value="{{ $settings->stripe_publishable_key }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Stripe Secret Key Code:</label>
							<input class="form-control" name="stripe_secret_key" value="{{ $settings->stripe_secret_key }}" required>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-regular fa-map-marker"></i> Google Maps Settings</h6><hr>
				<div class="row">
					<div class="col-md-12">
						<div class="dash-input-wrapper mb-30">
							<label>Google Maps API Key:</label>
							<input class="form-control" name="map_api_key" value="{{ $settings->map_api_key }}" required>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-regular fa-users"></i> Scoial Media Handels</h6><hr>
				<div class="row">
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Facebook Handel:</label>
							<input class="form-control" name="facebook_link" value="{{ $settings->facebook_link }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Whatsapp Handel:</label>
							<input class="form-control" name="whatsapp_link" value="{{ $settings->whatsapp_link }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Twitter Handel:</label>
							<input class="form-control" name="twitter_link" value="{{ $settings->twitter_link }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Instagram Handel:</label>
							<input class="form-control" name="instagram_link" value="{{ $settings->instagram_link }}" required>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-regular fa-buildings"></i> Property Settings</h6><hr>
				<div class="row">
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Verified Property Settings:</label>
							<input type="checkbox" data-toggle="switchbutton" data-onlabel="Yes" data-offlabel="No" {{ ($settings->verified_properties_only =='yes')?'checked':'' }}>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Number of Properties shown per page:</label>
							<input class="form-control" type="number" name="per_page_results" value="{{ $settings->per_page_results }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Average Price Radius (Meters):</label>
							<input class="form-control" type="number" min="1" step="0.01" name="average_price_radius" value="{{ $settings->average_price_radius }}" required>
						</div>
					</div>
				</div>
			</div>
			{{-- <br>
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-regular fa-buildings"></i> Telegram API Settings</h6><hr>
				<div class="row">
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Bot Token:</label>
							<input class="form-control" name="telegram_bot_token" value="{{ $settings->telegram_bot_token }}" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Chat ID:</label>
							<input class="form-control" name="telegram_chat_id" value="{{ $settings->telegram_chat_id }}" required>
						</div>
					</div>
				</div>
			</div> --}}
			<br>
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-regular fa-buildings"></i> Telegram API Settings</h6><hr>
				<template id="bot-template">
				    <div class="bg-blue border-20 mt-20 position-relative bot-block">
				        <button type="button" class="close-btn" style="position:absolute;top:10px;right:10px;">
				            <i class="fa fa-times"></i>
				        </button>
				        <div class="row">
				            <div class="col-md-6">
				                <div class="dash-input-wrapper mb-30">
				                    <label>Bot Token*</label>
				                    <input type="text" name="bots_bot_token_%%INDEX%%" required>
				                </div>
				            </div>
				            <div class="col-md-6">
				                <div class="dash-input-wrapper mb-30">
				                    <label>Chat ID*</label>
				                    <input type="text" name="bots_chat_id_%%INDEX%%" required>
				                </div>
				            </div>
				        </div>
				    </div>
				</template>
				<div class="row align-items-end" id="bots_div"></div>
			    <div class="d-grid mt-40">
			        <div class="btn btn-dark btn-lg" id="add-bot"><i class="fa-regular fa-plus me-2"></i>Add Bot</div>
			    </div>
			    <input type="hidden" name="bots_data" id="bots_data">
			</div>
			{{-- <br>
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-brands fa-facebook fa-lg me-2"></i> Facebook API Settings</h6><hr>
				<template id="group-template">
					<div class="bg-blue border-20 mt-20 position-relative group-block">
						<button type="button" class="close-group-btn" style="position:absolute;top:10px;right:10px;">
							<i class="fa fa-times"></i>
						</button>
						<div class="row">
							<div class="col-md-6">
								<div class="dash-input-wrapper mb-30">
									<label>Group Token*</label>
									<input type="text" name="groups_token_%%INDEX%%" required>
								</div>
							</div>
							<div class="col-md-6">
								<div class="dash-input-wrapper mb-30">
									<label>Group ID*</label>
									<input type="text" name="groups_id_%%INDEX%%" required>
								</div>
							</div>
						</div>
					</div>
				</template>
				<div class="row align-items-end" id="groups_div"></div>
				<div class="d-grid mt-40">
					<div class="btn btn-dark btn-lg" id="add-group"><i class="fa-regular fa-plus me-2"></i>Add Group</div>
				</div>
				<input type="hidden" name="groups_data" id="groups_data">
			</div>	--}}
			<br> 
			@php
				$header_image = "default.png";
				if(!empty($settings->header_image)){
					$header_image = $settings->header_image;
				}
				$app_image = "default.png";
				if(!empty($settings->app_image)){
					$app_image = $settings->app_image;
				}
				$banner_image = "default.png";
				if(!empty($settings->banner_image)){
					$banner_image = $settings->banner_image;
				}
				$ad_image = "default.png";
				if(!empty($settings->ad_image)){
					$ad_image = $settings->ad_image;
				}
				$footer_image = "default.png";
				if(!empty($settings->footer_image)){
					$footer_image = $settings->footer_image;
				}
				$header_logo = "logo.svg";
				if(!empty($settings->header_logo)){
					$header_logo = $settings->header_logo;
				}
				$footer_logo = "logo.svg";
				if(!empty($settings->footer_logo)){
					$footer_logo = $settings->footer_logo;
				}
			@endphp
			<div class="bg-white card-box border-20 mt-5">
				<h6><i class="fa-regular fa-brush"></i> CMS Settings (Height:200px)</h6><hr>
				<div class="row">
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Homepage Header Banner:</label>
							<input type="file" style="padding-top: 14px !important;" class="form-control" name="header_image" >
							<br>
							<img style="height: 200px !important;" src='{{ asset("uploads/media/$header_image") }}' class="img-fluid">
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Homepage App Image:</label>
							<input type="file" style="padding-top: 14px !important;" class="form-control" name="app_image" >
							<br>
							<img style="height: 200px !important;" src='{{ asset("uploads/media/$app_image") }}' class="img-fluid">
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Find Property Header Banner:</label>
							<input type="file" style="padding-top: 14px !important;" class="form-control" name="banner_image" >
							<br>
							<img style="height: 200px !important;" src='{{ asset("uploads/media/$banner_image") }}' class="img-fluid">
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Find Property Ad Image:</label>
							<input type="file" style="padding-top: 14px !important;" class="form-control" name="ad_image">
							<br>
							<img style="height: 200px !important;" src='{{ asset("uploads/media/$ad_image") }}' class="img-fluid">
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Website Header Logo:</label>
							<input type="file" style="padding-top: 14px !important;" class="form-control" name="header_logo">
							<br>
							<img style="height: 200px !important;" src='{{ asset("uploads/media/$header_logo") }}' class="img-fluid">
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Website Footer Logo:</label>
							<input type="file" style="padding-top: 14px !important;" class="form-control" name="footer_logo">
							<br>
							<img style="height: 200px !important;" src='{{ asset("uploads/media/$footer_logo") }}' class="img-fluid">
						</div>
					</div>
					<div class="col-md-12">
						<div class="dash-input-wrapper mb-30">
							<label>Website Footer Image:</label>
							<input type="file" style="padding-top: 14px !important;" class="form-control" name="footer_image">
							<br>
							<img src='{{ asset("uploads/media/$footer_image") }}' class="img-fluid">
						</div>
					</div>
					{{-- <div class="col-md-2">
						<div class="dash-input-wrapper mb-30">
							<label>Footer Type:</label>
							<input type="checkbox" name="footer_type" data-toggle="switchbutton" data-onlabel="Footer 1" data-offlabel="Footer 2" {{ ($settings->footer_type =='footer1')?'checked':'' }}>
						</div>
					</div> --}}
					<div class="col-md-8">
						<div class="dash-input-wrapper mb-30">
							<label>Website Footer Business Address:</label>
							<input class="form-control" name="business_address" value="{{ $settings->business_address }}" required>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label>&nbsp;</label>
				<div class="d-grid">
					<button type="submit" class="btn btn-two btn-block"><i class="fa-thin fa-save text-white"></i>&nbsp;&nbsp;Update Settings</button>
				</div>
			</div>
		</div>
	</form>
</div>
@endsection
@section('script')
<script>
    let existingBots = {!! $settings->telegram_bot ?? '[]' !!};
    let botIndex = 0;

    function addBot(data = {}) {
        botIndex++;
        let template = $('#bot-template').html();
        let rendered = template.replaceAll('%%INDEX%%', botIndex);
        let $bot = $(rendered);

        // First bot cannot be removed
        if (botIndex === 1) {
            $bot.find('.close-btn').remove();
        }

        // Pre-fill values if editing
        if (data.bot_token) $bot.find(`[name="bots_bot_token_${botIndex}"]`).val(data.bot_token);
        if (data.chat_id) $bot.find(`[name="bots_chat_id_${botIndex}"]`).val(data.chat_id);

        $('#bots_div').append($bot);
    }

    $(document).ready(function () {
        // Load existing bots
        if (existingBots.length) {
            existingBots.forEach(bot => addBot(bot));
        } else {
            addBot();
        }

        $('#add-bot').on('click', function () {
            addBot();
        });

        $(document).on('click', '.close-btn', function () {
            $(this).closest('.bot-block').remove();
        });

        $('form').on('submit', function (e) {
            const bots = [];
            let valid = true;

            $('.bot-block').each(function () {
                const bot = {};
                const token = $(this).find(`[name^="bots_bot_token_"]`).val().trim();
                const chatId = $(this).find(`[name^="bots_chat_id_"]`).val().trim();

                if (!token || !chatId) {
                    valid = false;
                    $(this).find('input').css('border', '1px solid red');
                } else {
                    $(this).find('input').css('border', '');
                }

                bot.bot_token = token;
                bot.chat_id = chatId;
                bots.push(bot);
            });

            if (!valid) {
                e.preventDefault();
                Swal.fire({
                    title: "Missing Info",
                    text: "Please fill in all required fields (Bot Token and Chat ID).",
                    icon: "error"
                });
                return false;
            }

            $('#bots_data').val(JSON.stringify(bots));
        });
    });

	// ================= FACEBOOK GROUPS =================
let existingGroups = {!! $settings->facebook_groups ?? '[]' !!}; // JSON from DB
let groupIndex = 0;

function addGroup(data = {}) {
    groupIndex++;
    let template = $('#group-template').html();
    let rendered = template.replaceAll('%%INDEX%%', groupIndex);
    let $group = $(rendered);

    // first group cannot be removed
    if (groupIndex === 1) {
        $group.find('.close-group-btn').remove();
    }

    if (data.group_token) $group.find(`[name="groups_token_${groupIndex}"]`).val(data.group_token);
    if (data.group_id)    $group.find(`[name="groups_id_${groupIndex}"]`).val(data.group_id);

    $('#groups_div').append($group);
}

// init groups
if (existingGroups && existingGroups.length) {
    existingGroups.forEach(g => addGroup(g));
} else {
    addGroup();
}

// add new group
$('#add-group').on('click', function () {
    addGroup();
});

// remove group
$(document).on('click', '.close-group-btn', function () {
    $(this).closest('.group-block').remove();
});

</script>
@endsection
{{-- @section('script')
<script>
    // ============== TELEGRAM BOTS ==============
    let existingBots = @json(json_decode($settings->telegram_bot ?? '[]', true));
    let botIndex = 0;

    function addBot(data = {}) {
        botIndex++;
        let template = $('#bot-template').html();
        let rendered = template.replaceAll('%%INDEX%%', botIndex);
        let $bot = $(rendered);

        // First bot cannot be removed
        if (botIndex === 1) {
            $bot.find('.close-btn').remove();
        }

        // Pre-fill values if editing
        if (data.bot_token) $bot.find(`[name="bots_bot_token_${botIndex}"]`).val(data.bot_token);
        if (data.chat_id)   $bot.find(`[name="bots_chat_id_${botIndex}"]`).val(data.chat_id);

        $('#bots_div').append($bot);
    }

    // ============== FACEBOOK GROUPS ==============
    let existingGroups = @json(json_decode($settings->facebook_groups ?? '[]', true));
    let groupIndex = 0;

    function addGroup(data = {}) {
        groupIndex++;
        let template = $('#group-template').html();
        let rendered = template.replaceAll('%%INDEX%%', groupIndex);
        let $group = $(rendered);

        // First group cannot be removed
        if (groupIndex === 1) {
            $group.find('.close-group-btn').remove();
        }

        if (data.group_token) $group.find(`[name="groups_token_${groupIndex}"]`).val(data.group_token);
        if (data.group_id)    $group.find(`[name="groups_id_${groupIndex}"]`).val(data.group_id);

        $('#groups_div').append($group);
    }

    // ============== INIT & SUBMIT ==============
    $(document).ready(function () {

        // ---- load existing bots ----
        if (existingBots && existingBots.length) {
            existingBots.forEach(bot => addBot(bot));
        } else {
            addBot();
        }

        // ---- load existing groups ----
        if (existingGroups && existingGroups.length) {
            existingGroups.forEach(g => addGroup(g));
        } else {
            addGroup();
        }

        // add bot
        $('#add-bot').on('click', function () {
            addBot();
        });

        // add group
        $('#add-group').on('click', function () {
            addGroup();
        });

        // remove bot
        $(document).on('click', '.close-btn', function () {
            $(this).closest('.bot-block').remove();
        });

        // remove group
        $(document).on('click', '.close-group-btn', function () {
            $(this).closest('.group-block').remove();
        });

        // ====== ONE submit handler for everything ======
        $('form').on('submit', function (e) {
            let valid = true;

            // ---- collect bots ----
            const bots = [];
            $('.bot-block').each(function () {
                const token  = $(this).find('[name^="bots_bot_token_"]').val().trim();
                const chatId = $(this).find('[name^="bots_chat_id_"]').val().trim();

                if (!token || !chatId) {
                    valid = false;
                    $(this).find('input').css('border', '1px solid red');
                } else {
                    $(this).find('input').css('border', '');
                }

                bots.push({
                    bot_token: token,
                    chat_id: chatId
                });
            });

            // ---- collect facebook groups ----
            const groups = [];
            $('.group-block').each(function () {
                const token   = $(this).find('[name^="groups_token_"]').val().trim();
                const groupId = $(this).find('[name^="groups_id_"]').val().trim();

                if (!token || !groupId) {
                    valid = false;
                    $(this).find('input').css('border', '1px solid red');
                } else {
                    $(this).find('input').css('border', '');
                }

                groups.push({
                    group_token: token,
                    group_id: groupId
                });
            });

            if (!valid) {
                e.preventDefault();
                Swal.fire({
                    title: "Missing Info",
                    text: "Please fill in all required fields for Telegram and Facebook.",
                    icon: "error"
                });
                return false;
            }

            // put JSON into hidden fields
            $('#bots_data').val(JSON.stringify(bots));
            $('#groups_data').val(JSON.stringify(groups));
        });
    });
</script>
@endsection --}}