@extends("admin.layout.master")
@section("title","Dashboard")
@section ("content")
<div class="d-flex flex-column flex-column-fluid">
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{url('/')}}" class="text-muted text-hover-primary">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-400 w-5px h-2px"></span>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('event-list')}}" class="text-muted text-hover-primary">Event Manager</a>
                    </li>
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-400 w-5px h-2px"></span>
                    </li>
                    <li class="breadcrumb-item text-muted">Create</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-header mb-4">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3">Event Manager</span>
                </h3>
            </div>
            <div class="card-body pt-0">
                <form enctype="multipart/form-data" action="{{route('event-save')}}" method="post" id="createForm">
                    <div class="row">
                        @csrf
                        <div class="col-md-6">
                            <label class="required form-label">Event Host</label>
                            <select class="form-select mb-2" name="clubid" id="clubid" data-control="select2"
                                data-hide-search="true" data-placeholder="Select Club"
                                data-error="#category_id_error">
                                <option value="">Select</option>
                                @forelse($clubs as $club)
                                    <option value="{{ $club->id }}">{{ $club->name }}</option>
                                @empty
                                    <option value="">No state found</option>
                                @endforelse
                            </select>
                            <span class="error" id="clubid_error"></span>
                            @if ($errors->has('clubid'))
                                <span class="text-danger">{{ $errors->first('clubid') }}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class=" required form-label">Name</label>
                            <input value="{{old("Name")}}" type="text" name="Name" class="form-control stop_first_space"
                                placeholder="Name" data-error="#Name_error" />
                            <span class="error" id="Name_error"></span>
                            @if($errors->has("Name"))
                            <span class="text-danger">{{$errors->first("Name")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">Gender</label>
                                <div class="form-inline">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="male" name="gender" value="M" checked>
                                        <label class="form-check-label" for="M">Male</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="female" name="gender" value="F">
                                        <label class="form-check-label" for="F">Female</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="both" name="gender" value="B">
                                        <label class="form-check-label" for="Both">Both</label>
                                    </div>
                                </div>
                            <span class="error" id="gender_error"></span>
                            @if($errors->has("gender"))
                            <span class="text-danger">{{$errors->first("gender")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">Address</label>
                            <input value="{{old("address")}}" type="text" name="address"
                                class="form-control stop_first_space" placeholder="Address"
                                data-error="#address_error" />
                            <span class="error" id="address_error"></span>
                            @if($errors->has("address"))
                            <span class="text-danger">{{$errors->first("address")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">City</label>
                            <input value="{{old("city")}}" type="text" name="city" class="form-control stop_first_space"
                                placeholder="City" data-error="#city_error" />
                            <span class="error" id="city_error"></span>
                            @if($errors->has("city"))
                            <span class="text-danger">{{$errors->first("city")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">Description</label>
                            <input value="{{old("Description")}}" type="text" name="Description"
                                class="form-control stop_first_space" placeholder="Description"
                                data-error="#Description_error" />
                            <span class="error" id="Description_error"></span>
                            @if($errors->has("Description"))
                            <span class="text-danger">{{$errors->first("Description")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="form-label">Category</label>
                            <div class="mb-2" id="Category" data-error="#category_id_error">
                                @forelse($category as $ct)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="Category[]" id="cat_{{ $ct->id }}" value="{{ $ct->name }}">
                                        <label class="form-check-label" for="cat_{{ $ct->id }}">
                                            {{ $ct->name }}
                                        </label>
                                    </div>
                                @empty
                                    <div>No Category found</div>
                                @endforelse
                            </div>
                            <span class="error" id="Category_error"></span>
                            @if($errors->has("Category"))
                            <span class="text-danger">{{$errors->first("Category")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">Event Date</label>
                            <input value="{{old("EventDate")}}" type="date" name="EventDate"
                                class="form-control stop_first_space" placeholder="EventDate"
                                data-error="#EventDate_error" />
                            <span class="error" id="EventDate_error"></span>
                            @if($errors->has("EventDate"))
                            <span class="text-danger">{{$errors->first("EventDate")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="form-label">End Date</label>
                            <input value="{{old("EndDate")}}" type="date" name="EndDate"
                                class="form-control stop_first_space" placeholder="EndDate"
                                data-error="#EndDate_error" />
                            <span class="error" id="EndDate_error"></span>
                            @if($errors->has("EndDate"))
                            <span class="text-danger">{{$errors->first("EndDate")}}</span>
                            @endif
                        </div>
                    
                        <div class="col-md-12 fv-row mb-5">
                            <label class="form-label">Reg start date</label>
                            <input value="{{old("Regstart")}}" type="date" name="Regstart"
                                class="form-control stop_first_space" placeholder="Regstart"
                                data-error="#Regstart_error" />
                            <span class="error" id="Regstart_error"></span>
                            @if($errors->has("Regstart"))
                            <span class="text-danger">{{$errors->first("Regstart")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="form-label">Reg end date</label>
                            <input value="{{old("regend")}}" type="date" name="regend"
                                class="form-control stop_first_space" placeholder="Regend" data-error="#regend_error" />
                            <span class="error" id="regend_error"></span>
                            @if($errors->has("regend"))
                            <span class="text-danger">{{$errors->first("regend")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="form-label">Logo 1</label>
                            <input value="{{old("logo1")}}" type="file" name="logo1"
                                class="form-control stop_first_space" placeholder="Logo1" data-error="#logo1_error" />
                            <span class="error" id="logo1_error"></span>
                            @if($errors->has("logo1"))
                            <span class="text-danger">{{$errors->first("logo1")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="form-label">Logo 2</label>
                            <input value="{{old("logo2")}}" type="file" name="logo2"
                                class="form-control stop_first_space" placeholder="Logo2" data-error="#logo2_error" />
                            <span class="error" id="logo2_error"></span>
                            @if($errors->has("logo2"))
                            <span class="text-danger">{{$errors->first("logo2")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="form-label">Report Header</label>
                            <input value="{{old("rptheader")}}" type="file" name="rptheader"
                                class="form-control stop_first_space" placeholder="Rptheader"
                                data-error="#rptheader_error" />
                            <span class="error" id="rptheader_error"></span>
                            @if($errors->has("rptheader"))
                            <span class="text-danger">{{$errors->first("rptheader")}}</span>
                            @endif
                        </div>
                  
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" id="kt_modal_new_address_submit" class="btn btn-primary me-3">
                            <span class="indicator-label">Submit</span>
                        </button>
                        <a href="{{route('event-list')}}" class="btn btn-light">Back</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push("js")
<script>
$(document).ready(function() {
    $("#createForm").validate({
        errorPlacement: function(error, element) {
            var placement = $(element).data("error");
            if (placement) {
                $(placement).append(error)
            } else {
                error.insertAfter(element);
                var selectId = "#" + error.attr("id");
                text = selectId.replace("-error", "_error"); // Remove the "-error" string
                $(text).html(error)
            }
        },
        rules:{
            name: {
                required: true,
            }, 
            gender: {
                required: true,
            },
            address: {
                required: true,
            },
            city: {
                required: true,
            },
            Description: {
                required: true,
            },
            EventDate: {
                required: true,
            },
            EndDate: {
                required: false,
            },
            Regstart: {
                required: false,
            },
            regend: {
                required: false,
            },
            logo1: {
                required: false,
            },
            rptheader: {
                required: false,
            }
        },
        messages: {
            name: {
                required: "Name field is required."
            },
            gender: {
                required: "Gender field is required."
            },
            address: {
                required: "Address field is required."
            },
            city: {
                required: "City field is required."
            },
            Description: {
                required: "Description field is required."
            },
            EventDate: {
                required: "EventDate field is required."
            },
            EndDate: {
                required: "EndDate field is required."
            },
            Regstart: {
                required: "Regstart field is required."
            },
            regend: {
                required: "Regend field is required."
            },
            logo1: {
                required: "Logo1 field is required."
            },
            logo2: {
                required: "Logo2 field is required."
            },
            rptheader: {
                required: "Rptheader field is required."
            },
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
});
</script>
@endpush