@extends('layouts.user.main')

@section('content')

@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<!--begin::Post-->
	<div class="post d-flex flex-column-fluid" id="kt_post">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			<!--begin::Card-->
			<div class="card">
				<!--begin::Card header-->
				<div class="card-header">
					<!--begin::Card title-->
					<div class="card-title">
						<!--begin::Search-->
						Mapped Symbols
						<!--end::Search-->
					</div>
					<!--begin::Card title-->
				</div>
				<!--end::Card header-->
				<!--begin::Card body-->
				<div class="card-body py-4">
					<form class="form" method="POST" action="{{route('mappedSymbolsUpdate')}}" id="symbol_mapping_form">
						@csrf
						<div class="card-body">
                            @if($symbols->isNotEmpty())
                                @foreach($symbols as $key => $symbol) 
                                <div class="form-group row" @if($key > 0) style="margin-top: 15px" @endif>
                                    <div class="col-lg-4">
                                        <label class="fw-bold fs-6 mb-2">Symbol</label><br/>
                                        <span>{{ $symbol->symbols }}</span>
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="required fw-bold fs-6 mb-2">Group</label>
                                        <div class="input-group">
                                        <select name="symbol_{{ $symbol->symbolId }}[groupId]" aria-label="Select Group" data-control="select2" data-placeholder="Select Group" class="form-select form-select-solid fw-bolder" data-allow-clear="true">
                                            <option value="">Select Group</option>
                                            @foreach ($groups as $group)
                                                <option value="{{ $group->id }}" {{$symbol->groupId == $group->id ? "selected" : '' }}>{{ $group->group }}</option>
                                            @endforeach
                                        </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="required fw-bold fs-6 mb-2">Sector</label>
                                        <div class="input-group">
                                        <select name="symbol_{{ $symbol->symbolId }}[sectorId]" aria-label="Select Sector" data-control="select2" data-placeholder="Select Sector" class="form-select form-select-solid fw-bolder" data-allow-clear="true">
                                            <option value="">Select Sector</option>
                                            @foreach ($sectors as $sector)
                                                <option value="{{ $sector->id }}" {{$symbol->sectorId == $sector->id ? "selected" : '' }}>{{ $sector->sector }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="symbol_{{ $symbol->symbolId }}[oldSectorId]" value={{$symbol->sectorId}}>
                                        <input type="hidden" name="symbol_{{ $symbol->symbolId }}[oldgroupId]" value={{$symbol->groupId}}>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
							@else
								<div class="row">
									<label class="fw-bold fs-6 mb-2 text-center text-muted">
										No data available for Mapped Symbols
									</label>
								</div>
                            @endif
						</div>
						@if($symbols->isNotEmpty())
						<div class="card-footer">
							<div class="row">
								<div class="col-lg-6">
                                    <a href="{{ route('mappedSymbols') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                                    <button type="submit" class="btn btn-primary mr-2">Update</button>
								</div>
							</div>
						</form>
						</div>
						@endif
				</div>
				<!--end::Card body-->
			</div>
			<!--end::Card-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Post-->
</div>
<script>
    $(document).ready(function() {
        $('#symbol_mapping_form').submit(function(event) {
            $(this).find('[type=submit]').prop('disabled', true);
        });
    });
</script>
@endsection