@extends('layouts.dash')

@section('content')


<!--begin::Main-->
					<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
						<!--begin::Content wrapper-->
						<div class="d-flex flex-column flex-column-fluid">
							<!--begin::Toolbar-->
							<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
								<!--begin::Toolbar container-->
								<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
									<!--begin::Page title-->
									<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
										<!--begin::Title-->
										<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">BRC Level</h1>
										<!--end::Title-->
										<!--begin::Breadcrumb-->
									
									</div>
									<!--end::Page title-->
								</div>
								<!--end::Toolbar container-->
							</div>
							<!--end::Toolbar-->
							<!--begin::Content-->
							<div id="kt_app_content" class="app-content flex-column-fluid">
								<!--begin::Content container-->
								<div id="kt_app_content_container" class="app-container container-xxl">
									<!--begin::Card-->
									<div class="card">
										<!--begin::Card header-->
										<div class="card-header border-0 pt-6">
											<!--begin::Card title-->
											<div class="card-title">
												<!--begin::Search-->
												<div class="d-flex align-items-center position-relative my-1">
													<i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
														<span class="path1"></span>
														<span class="path2"></span>
													</i>
													<input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search user" />
												</div>
												
												<!--end::Search-->
											</div>
											<!--begin::Card title-->
											<!--begin::Card toolbar-->
											<div class="card-toolbar">
												<!--begin::Toolbar-->
												<div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
													
													<!--begin::Export-->
													<button type="button" class="btn btn-light-primary me-3" data-bs-toggle="modal" id="exportBtn">
													<i class="ki-duotone ki-exit-up fs-2">
														<span class="path1"></span>
														<span class="path2"></span>
													</i>Export</button>
													<!--end::Export-->
													<!--begin::Add user-->
													<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user" id="addBRCbtn">
													<i class="ki-duotone ki-plus fs-2"></i>Add BRC Level</button>
													<!--end::Add user-->
												</div>
												<!--end::Toolbar-->
												<!--begin::Group actions-->
												<div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
													<div class="fw-bold me-5">
													<span class="me-2" data-kt-user-table-select="selected_count"></span>Selected</div>
													<button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete Selected</button>
												</div>
												<!--end::Group actions-->
												<!--begin::Modal - Adjust Balance-->
												<div class="modal fade" id="kt_modal_export_users" tabindex="-1" aria-hidden="true">
													<!--begin::Modal dialog-->
													<div class="modal-dialog modal-dialog-centered mw-650px">
														<!--begin::Modal content-->
														<div class="modal-content">
															<!--begin::Modal header-->
															<div class="modal-header">
																<!--begin::Modal title-->
																<h2 class="fw-bold">Export Users</h2>
																<!--end::Modal title-->
																<!--begin::Close-->
																<div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-users-modal-action="close">
																	<i class="ki-duotone ki-cross fs-1">
																		<span class="path1"></span>
																		<span class="path2"></span>
																	</i>
																</div>
																<!--end::Close-->
															</div>
															<!--end::Modal header-->
															<!--begin::Modal body-->
															<div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
																<!--begin::Form-->
															
																<form id="kt_modal_export_users_form" class="form" action="#">
																	<!--begin::Input group-->
																	<div class="fv-row mb-10">
																		<!--begin::Label-->
																		<label class="fs-6 fw-semibold form-label mb-2">Select Roles:</label>
																		<!--end::Label-->
																		<!--begin::Input-->
																		<select name="role" data-control="select2" data-placeholder="Select a role" data-hide-search="true" class="form-select form-select-solid fw-bold">
																			<option></option>
																			<option value="Administrator">Administrator</option>
																			<option value="Analyst">Analyst</option>
																			<option value="Developer">Developer</option>
																			<option value="Support">Support</option>
																			<option value="Trial">Trial</option>
																		</select>
																		<!--end::Input-->
																	</div>
																	<!--end::Input group-->
																	<!--begin::Input group-->
																	<div class="fv-row mb-10">
																		<!--begin::Label-->
																		<label class="required fs-6 fw-semibold form-label mb-2">Select Export Format:</label>
																		<!--end::Label-->
																		<!--begin::Input-->
																		<select name="format" data-control="select2" data-placeholder="Select a format" data-hide-search="true" class="form-select form-select-solid fw-bold">
																			<option></option>
																			<option value="excel">Excel</option>
																			<option value="pdf">PDF</option>
																			<option value="cvs">CVS</option>
																			<option value="zip">ZIP</option>
																		</select>
																		<!--end::Input-->
																	</div>
																	<!--end::Input group-->
																	<!--begin::Actions-->
																	<div class="text-center">
																		<button type="reset" class="btn btn-light me-3" data-kt-users-modal-action="cancel">Discard</button>
																		<button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
																			<span class="indicator-label">Submit</span>
																			<span class="indicator-progress">Please wait... 
																			<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
																		</button>
																	</div>
																	<!--end::Actions-->
																</form>
																<!--end::Form-->
															</div>
															<!--end::Modal body-->
														</div>
														<!--end::Modal content-->
													</div>
													<!--end::Modal dialog-->
												</div>
												<!--end::Modal - New Card-->
												<!--begin::Modal - Add task-->
                            <div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
                                <!--begin::Modal dialog-->
                                <div class="modal-dialog modal-dialog-centered mw-650px">
                                    <!--begin::Modal content-->
                                    <div class="modal-content">
                                        <!--begin::Modal header-->
                                        <div class="modal-header" id="kt_modal_add_user_header">
                                            <!--begin::Modal title-->
                                            <h2 class="fw-bold" id="brc_head">Add BRC Level</h2>
                                            <!--end::Modal title-->
                                            <!--begin::Close-->
                                            <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                                                <i class="ki-duotone ki-cross fs-1">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </div>
                                            <!--end::Close-->
                                        </div>
                                        <!--end::Modal header-->
                                        <!--begin::Modal body-->
                                        <div class="modal-body px-5 my-7">
                                            <!--begin::Form-->
                                            <form id="kt_modal_add_user_form" class="form" action="#">
                                                <!--begin::Scroll-->
                                                <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">
                                                  
                                                    <!--begin::Col-->
                                                        <div class="fv-row mb-7">
                                                            <!--end::Label-->
                                                            <label class="required fs-5 fw-semibold mb-2">District</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <select name="district" id="district" class="form-control form-control-solid">
                                                                <option value="">Select</option>
                                                                <option value="Alappuzha">Alappuzha</option>
                                                                <option value="Ernakulam">Ernakulam</option>
                                                                <option value="Idukki">Idukki</option>
                                                                <option value="Kannur">Kannur</option>
                                                                <option value="Kasaragod">Kasaragod</option>
                                                                <option value="Kollam">Kollam</option>
                                                                <option value="Kottayam">Kottayam</option>
                                                                <option value="Kozhikode">Kozhikode</option>
                                                                <option value="Malappuram">Malappuram</option>
                                                                <option value="Palakkad">Palakkad</option>
                                                                <option value="Pathanamthitta">Pathanamthitta</option>
                                                                <option value="Thiruvananthapuram">Thiruvananthapuram</option>
                                                                <option value="Thrissur">Thrissur</option>
                                                                <option value="Wayanad">Wayanad</option>

                                                            </select>
                                                            <span id="district-error" class="text-danger"></span>
                                                             
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        
                                                    <!--begin::Input group-->
                                                    <div class="fv-row mb-7">
                                                        <!--begin::Label-->
                                                        <label class="required fw-semibold fs-6 mb-2">BRC </label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="text" name="name" id="name" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="BRC" />
                                                        <span id="name-error" class="text-danger"></span>
                                                        <!--end::Input-->
                                                    </div>
                                                    <!--end::Input group-->
                                                    <!--begin::Input group-->
                                                    <div class="fv-row mb-7">
                                                        <!--begin::Label-->
                                                        <label class="required fw-semibold fs-6 mb-2">BRC In-Charge</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="text" name="brc_in_charge" id="brc_in_charge" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="BRC InCharge" />
                                                        <span id="brc_in_charge-error" class="text-danger"></span>
                                                        <!--end::Input-->
                                                    </div>
                                                    <!--end::Input group-->
                                                    <!--begin::Input group-->
                                                    <div class="fv-row mb-7">
                                                        <!--begin::Label-->
                                                        <label class="fw-semibold fs-6 mb-2">Email</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="email" name="email" id="email" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="example@domain.com" />
                                                        <span id="email-error" class="text-danger"></span>
                                                        <!--end::Input-->
                                                    </div>
                                                    <!--end::Input group-->
                                                    <!--begin::Input group-->
                                                    <div class="fv-row mb-7">
                                                        <!--begin::Label-->
                                                        <label class="required fw-semibold fs-6 mb-2">Phone</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="number" name="phone" id="phone" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="phone number"  />
                                                        <span id="phone-error" class="text-danger"></span>
                                                        <!--end::Input-->
                                                    </div>
                                                    <!--end::Input group-->
                                                    
                                                    
                                                </div>
                                                <!--end::Scroll-->
                                                <input type="hidden" name="brc_id" id="brc_id">
                                                <!--begin::Actions-->
                                                <div class="text-center pt-10">
                                                    <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                                                    <button type="button" class="btn btn-primary" id="saveTaskBtn">
                                                        <span class="indicator-label">Submit</span>
                                                    </button>
                                                </div>
                                                <!--end::Actions-->
                                            </form>
                                            <!--end::Form-->
                                        </div>
                                        <!--end::Modal body-->
                                    </div>
                                    <!--end::Modal content-->
                                </div>
                                <!--end::Modal dialog-->
                            </div>
                            <!--end::Modal - Add task-->
											</div>
											<!--end::Card toolbar-->
										</div>
										<!--end::Card header-->
										<!--begin::Card body-->
										<div class="card-body py-4">
										    
										    @if (session('success'))
                                                <div class="alert alert-success">
                                                    {{ session('success') }}
                                                </div>
                                            @endif
                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                        
											<!--begin::Table-->
											<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
												<thead>
													<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
														
														<th class="min-w-125px">BRC Name</th>
														<th class="min-w-125px">Email</th>
														<th class="min-w-125px">Phone Number</th>
														<th class="min-w-90px">District</th>
                                                        <th class=" min-w-100px"></th>
														<th class=" min-w-100px"></th>
														<th class="text-end min-w-50px"></th>
													</tr>
												</thead>
												<tbody class="text-gray-600 fw-semibold">
												    @foreach($brcLevels as $brcLevel)
													<tr>
														
														<td>{{ $brcLevel->name }}</td>
														<td>{{ $brcLevel->email }}</td>
														<td>{{ $brcLevel->phone }}</td>
														<td>{{ $brcLevel->district }}</td>
														<td></td>
														<td></td>
														<td class="text-end">
															<a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"><i class="fas fa-ellipsis-v ki-down"></i> 
															</a>
															<!--begin::Menu-->
															<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
																<!--begin::Menu item-->
																<div class="menu-item px-3">
																	<a href="#" onclick="event.preventDefault();editRow({{ $brcLevel->id }})" class="menu-link px-3">Edit</a>
																</div>
																<!--end::Menu item-->
																<!--begin::Menu item-->
																<div class="menu-item px-3">
																	<a href="#" class="menu-link px-3" data-kt-users-table-filter="delete_row" onclick="event.preventDefault();deleteRow({{ $brcLevel->id }})">Delete</a>
																</div>
																<!--end::Menu item-->
															</div>
															<!--end::Menu-->
														</td>
													</tr>
													@endforeach
													</tbody>
											</table>
											<!--end::Table-->
										</div>
										<!--end::Card body-->
									</div>
									<!--end::Card-->
								</div>
								<!--end::Content container-->
							</div>
							<!--end::Content-->
						</div>
						<!--end::Content wrapper-->
						<!--begin::Footer-->
			
						<!--end::Footer-->
					</div>
					<!--end:::Main-->


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

    document.getElementById('addBRCbtn').addEventListener('click', function() {
        
        document.getElementById('kt_modal_add_user_form').reset();
        document.getElementById("brc_id").value = "";
        $('#brc_head').html("Add BRC Level");
    });

   $('#saveTaskBtn').on('click', function(e) {
        e.preventDefault(); // Prevent default form submission
        
        const brc_id = document.getElementById("brc_id").value; // Get BRC ID
        const name = document.getElementById("name").value; // Get Name
        const brc_in_charge = document.getElementById("brc_in_charge").value; // Getbrc in charge
        const email = document.getElementById("email").value; // Get Email
        const phone = document.getElementById("phone").value; // Get Phone
        const district = document.getElementById("district").value;
    
        // Check if brc_id exists to decide whether to update or create
        if (brc_id) {
            // Update existing BRC level
            fetch(`{{ url('brc-level/update') }}/${brc_id}`, { 
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    brc_in_charge: brc_in_charge,
                    email: email,
                    phone: phone,
                    district : district,
                })
            })
            .then(response => response.json())
            .then(response => {
                console.log(response);
                if (response.message == "Success") {
                    location.reload(true);
                                  
                }
            })
            .catch(error => console.error('Error:', error));
            
            // Hide modal after submission
            $('#kt_modal_add_user').modal('hide');	
        } else {
            fetch(`{{ route('brc-level.store') }}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ name,brc_in_charge,email, phone,district })
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(errors => { throw errors });
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
        location.reload();
        $('#kt_modal_add_user').modal('hide');
    })
    .catch(errors => {
        document.getElementById("name-error").innerText = errors.name ? errors.name[0] : '';
        document.getElementById("brc_in_charge-error").innerText = errors.name ? errors.name[0] : '';
        document.getElementById("email-error").innerText = errors.email ? errors.email[0] : '';
        document.getElementById("phone-error").innerText = errors.phone ? errors.phone[0] : '';
        
    });
    
            // Hide modal after submission
        		
        }    
    });
    
    document.getElementById("name").addEventListener("input", function () {
        const errorContainer = document.getElementById("name-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The name field is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
     document.getElementById("brc_in_charge").addEventListener("input", function () {
        const errorContainer = document.getElementById("brc_in_charge-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The BRC in_charge field is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    document.getElementById("email").addEventListener("input", function () {
        const errorContainer = document.getElementById("email-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The email field is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    document.getElementById("phone").addEventListener("input", function () {
        const errorContainer = document.getElementById("phone-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The phone field is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    document.getElementById("district").addEventListener("input", function () {
        const errorContainer = document.getElementById("district-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The District field is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    function editRow(id) {
        // Open modal, fill it with current data
        $.ajax({
            type: 'GET',
            url: '{{ url('/brc-level/edit') }}/' + id, // Assuming you have an edit route
            success: function(data) {
    
                console.log(data);
                $('#name').val(data.name);
                $('#brc_in_charge').val(data.brc_in_charge);
                $('#email').val(data.email);
                $('#phone').val(data.phone);
                $('#brc_id').val(data.id);
                $('[name="district"]').val(data.district);
                $('#brc_head').html("Edit BRC Level");
                // Set the action to update
                $('#kt_modal_add_user_form').attr('action', `{{ url('/brc-level/update') }}/${id}`);
                $('#kt_modal_add_user').modal('show');
            }
        });
    }


    function deleteRow(id) {
    
        if (confirm('Are you sure you want to delete this?')) {
    			fetch(`{{ url('/brc-level/delete') }}/${id}`, { 
    				method: 'DELETE',
    				headers: {
    					'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    				}
    			})
    			.then(response => response.json())
    			.then(data => {
    				    console.log(data);
                        window.location.reload();
                })
    			.catch(error => console.error('Error:', error));
    		}
    }
    
    document.getElementById('exportBtn').addEventListener('click', function () {
                        let table = document.getElementById('kt_table_users');
                        let rows = Array.from(table.querySelectorAll('tr'));
                    
                        // Create CSV data excluding the "Actions" column (last column)
                        let csvContent = rows.map(row => {
                            let cols = Array.from(row.querySelectorAll('th, td'));
                            
                            // Filter out the last column (index -1 means skip the last column)
                            let filteredCols = cols.slice(0, -2);
                    
                            // Join the content as CSV format
                            return filteredCols.map(col => `"${col.textContent}"`).join(',');
                        }).join('\n');
                    
                        // Create a downloadable link
                        let csvBlob = new Blob([csvContent], { type: 'text/csv' });
                        let csvUrl = URL.createObjectURL(csvBlob);
                        let link = document.createElement('a');
                        link.href = csvUrl;
                        link.download = 'export.csv';
                    
                        // Trigger the download
                        link.click();
                    });


</script>

@endsection