@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">
                        Projects</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 d-flex gap-3">
                            <div class="btn-group custom-segment" role="group" aria-label="Basic radio toggle button group">
                                <!--<a href="{{ route('Projecttasks', ['status' => 'pending']) }}" class="btn" id="btnradio1">New</a>
                                <a href="{{ route('Projecttasks', ['status' => 'completed']) }}" class="btn" id="btnradio2">Completed</a>
                                <a href="{{ route('Projecttasks', ['status' => 'rejected']) }}" class="btn" id="btnradio3">Rejected</a>
                                <a href="{{ route('ApproveRequests') }}" class="btn" id="btnradio3">Approve Requests</a>-->
                                <a href="{{ route('Projecttasks', ['status' => 'pending']) }}" 
                                   class="btn {{ request('status') === 'pending' ? 'active' : '' }}" 
                                   id="btnradio1">New</a>
                                
                                <a href="{{ route('Projecttasks', ['status' => 'completed']) }}" 
                                   class="btn {{ request('status') === 'completed' ? 'active' : '' }}" 
                                   id="btnradio2">Completed</a>
                                
                                <a href="{{ route('Projecttasks', ['status' => 'rejected']) }}" 
                                   class="btn {{ request('status') === 'rejected' ? 'active' : '' }}" 
                                   id="btnradio3">Rejected</a>
                                
                                <a href="{{ route('ApproveRequests') }}" 
                                   class="btn {{ request('status') === null ? 'active' : '' }}" 
                                   id="btnradio4">Approve Requests</a>
                            </div>



                            <!--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::Filter-->
                                <button type="button" class="btn btn-light-primary me-3"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                    <i class="ki-duotone ki-filter fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>Filter</button>
                                <!--begin::Menu 1-->
                                <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px"
                                    data-kt-menu="true">
                                    <!--begin::Header-->
                                    <div class="px-7 py-5">
                                        <div class="fs-5 text-gray-900 fw-bold">Filter Option</div>
                                    </div>
                                    <!--end::Header-->
                                    <!--begin::Separator-->
                                    <div class="separator border-gray-200"></div>
                                    <!--end::Separator-->
                                    <!--begin::Content-->
                                    <div class="px-7 py-5" data-kt-user-table-filter="form">
                                    <form action="{{ route('filterProject') }}" method="POST">
                                        @csrf
                                        <!--begin::Input group-->
                                        <div class="mb-10">
                                            <label class="form-label fs-6 fw-semibold">District:</label>
                                            <select name="district" id="district1" class="form-control form-control-solid" required>
                                                                <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>
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Actions-->
                                        <div class="d-flex justify-content-end">
                                            <button type="reset"
                                                class="btn btn-light btn-active-light-primary fw-semibold me-2 px-6"
                                                data-kt-menu-dismiss="true"
                                                data-kt-user-table-filter="reset">Reset</button>
                                            <button type="submit"
                                                class="btn btn-primary fw-semibold px-6"
                                                data-kt-menu-dismiss="true"
                                                data-kt-user-table-filter="filter">Apply</button>
                                        </div>
                                        <!--end::Actions-->
                                        </form>
                                    </div>
                                    <!--end::Content-->
                                </div>
                                <!--end::Menu 1-->
                                <!--end::Filter-->
                                <!--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_new_address" id="addBtn">
                                    <i class="ki-duotone ki-plus fs-2"></i>Add Project New</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-fullscreen p-9">
                                    <!--begin::Modal content-->
                                    <div class="modal-content modal-rounded">
                                        <!--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_new_address" tabindex="-1"
                                aria-hidden="true">
                                <!--begin::Modal dialog-->
                                <div class="modal-dialog modal-fullscreen p-9">
                                    <!--begin::Modal content-->
                                    <div class="modal-content">
                                        <!--begin::Form-->
                                        <form class="form" action="{{ route('project.store') }}" method="POST" id="kt_modal_new_address_form">
                                            @csrf
                                            <!--begin::Modal header-->
                                            <div class="modal-header" id="kt_modal_new_address_header">
                                                <!--begin::Modal title-->
                                                <h2 id="head_name">Add New Project</h2>
                                                <!--end::Modal title-->
                                                <!--begin::Close-->
                                                <div class="btn btn-sm btn-icon btn-active-color-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 py-6 px-lg-15">
                                                <!--begin::Scroll-->
                                                <div class="scroll-y me-n7 pe-7"
                                                    id="kt_modal_new_address_scroll"
                                                    data-kt-scroll="true"
                                                    data-kt-scroll-activate="{default: false, lg: true}"
                                                    data-kt-scroll-max-height="auto"
                                                    data-kt-scroll-dependencies="#kt_modal_new_address_header"
                                                    data-kt-scroll-wrappers="#kt_modal_new_address_scroll"
                                                    data-kt-scroll-offset="350px">
                                                    <!--begin::Notice-->
                                                    <!--begin::Notice-->

                                                    <!--end::Notice-->
                                                    <!--end::Notice-->
                                                    <!--begin::Input group-->
                                                    <div class="row mb-5">
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--begin::Label-->
                                                            <label class="required fs-5 fw-semibold mb-2">Template</label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <select name="template_id" id="template_id" class="form-control form-control-solid" required>
                                                                <option value="">Select</option>
                                                                @foreach ($list as $li)
                                                                 <option value="{{$li->id}}">{{ $li->template_name }}</option>
                                                                    
                                                                @endforeach                                                             

                                                            </select>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label class="required fs-5 fw-semibold mb-2">Project
                                                                Name</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="project_name" id="project_name" required/>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label class="required fs-5 fw-semibold mb-2">School
                                                                Name</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="school_name" id="school_name" required/>
                                                            <!--end::Input-->
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="row mb-5">

                                                        
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--begin::Label-->
                                                            <label
                                                                class="required fs-5 fw-semibold mb-2">District</label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                           
                                                                <select name="district" id="district" class="form-control form-control-solid" required>
                                                                <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>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        
                                                        <!-- Panchayat Dropdown -->
                                                        <div class="col-md-4 fv-row">
                                                            <label class="required fs-5 fw-semibold mb-2">Panchayat</label>
                                                            <select name="panchayat" id="panchayat" class="form-control form-control-solid" required>
                                                                <option value="">Select</option>
                                                            </select>
                                                        </div>

                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label
                                                                class="required fs-5 fw-semibold mb-2">Assigned
                                                                Team </label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <select name="assigned_team_id" id="assigned_team_id" class="form-control form-control-solid" required>
                                                                <option value="">Select</option>
                                                                @foreach ($teams as $team)
                                                                 <option value="{{$team->id}}" data-phone="{{ $team->phone }}">{{ $team->name }}</option>
                                                                    
                                                                @endforeach                                                             

                                                            </select>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        
                                                    </div>
                                                    <div class="row mb-5">
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label
                                                                class="required fs-5 fw-semibold mb-2">Assigned
                                                                Team PH no</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder=""
                                                                name="assigned_team_ph" id="assigned_team_ph" />
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--begin::Label-->
                                                            <label class="required fs-5 fw-semibold mb-2">BRC
                                                                Level Name</label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <select name="brc_level_id" id="brc_level_id" class="form-control form-control-solid" required>
                                                                <option value="">Select</option>
                                                                @foreach ($brcLevels as $brc)
                                                                 <option value="{{$brc->id}}" data-phone="{{ $brc->phone }}">{{ $brc->name }}</option>
                                                                    
                                                                @endforeach                                                             

                                                            </select>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label class="required fs-5 fw-semibold mb-2">BRC
                                                                Level PH no</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="brc_level_ph" id="brc_level_ph" required/>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        
                                                    </div>
                                                    <div class="row mb-5">
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label
                                                                class="required fs-5 fw-semibold mb-2">Principle</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="principle" id="principle" required/>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--begin::Label-->
                                                            <label
                                                                class="required fs-5 fw-semibold mb-2">Principle
                                                                PH no</label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <input type="tel"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="principlePHno" id="principlePHno" pattern="\d{10}" title="Please enter exactly 10 digits" required/>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label
                                                                class="required fs-5 fw-semibold mb-2">Address</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="address" id="address" required/>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        
                                                    </div>
                                                    <div class="row mb-5">
                                                        <!--<div class="col-md-4 fv-row">
                                                            
                                                            <label
                                                                class="fs-5 fw-semibold mb-2">Panchayat</label>
                                                           
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="panchayat" id="panchayat" required/>
                                                            
                                                        </div>-->
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--begin::Label-->
                                                            <label class="required fs-5 fw-semibold mb-2">Pin
                                                                code</label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="pincode" id="pincode" required/>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <!--begin::Col-->


                                                    </div>
                                                    <hr />
                                                    <div>

                                                        <div>
                                                            <!--begin::Table container-->
                                                            <div class="table-responsive">
                                                                <!--begin::Table-->
                                                                <table
                                                                    class="table align-middle gs-0 gy-4" id="task_list">
                                                                    <!--begin::Table head-->
                                                                    <thead>
                                                                        <tr
                                                                            class="fw-bold text-muted bg-light">
                                                                            <th></th>
                                                                            <th>Task Name</th>
                                                                            <th>Assigned to</th>
                                                                            <th></th>
                                                                            <th></th>
                                                                            <th></th>
                                                                        </tr>
                                                                    </thead>

                                                                    <tbody>
                                                                        <tr>
                                                                        
                                                                        </tr>
                                                                    </tbody>
                                                                    <!--end::Table body-->
                                                                </table>
                                                                <!--end::Table-->
                                                            </div>
                                                            <!--end::Table container-->
                                                        </div>
                                                        <!--begin::Body-->
                                                    </div>
                                                </div>
                                                <!--end::Scroll-->
                                            </div>
                                            <!--end::Modal body-->
                                            <!--begin::Modal footer-->
                                            <div class="modal-footer flex-center">
                                                <!--begin::Button-->
                                                <button type="reset" 
                                                    class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                                                <!--end::Button-->
                                                <!--begin::Button-->
                                                <button type="submit" id="submitButton"
                                                    class="btn btn-primary">
                                                    <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>
                                                <!--end::Button-->
                                            </div>
                                            <!--end::Modal footer-->
                                        </form>
                                        <!--end::Form-->
                                    </div>
                                </div>
                            </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">Project Id</th>
                                    <th class="min-w-125px">School Name</th>
                                    <th class="min-w-125px">District</th>
                                    <th class="min-w-125px">BRC Level</th>
                                    <th class="min-w-100px">Contact person name</th>
                                    @if($status == "completed")
                                    <th class="min-w-100px">Completed Date</th>
                                    @endif
                                    <th class="text-end min-w-50px"></th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">
                                @forEach($projects as $pro)

                                <tr>
                                    <!-- Add onclick event to row -->
                                    
                                    <td><a href="{{ url('/projects') }}/{{ $pro->id }}">{{ $pro->projectId }}</a></td>
                                    <td><a href="{{ url('/projects') }}/{{ $pro->id }}">{{ $pro->school_name }}</a></td>
                                    <td><a href="{{ url('/projects') }}/{{ $pro->id }}">{{ $pro->district }}</a></td>
                                    <td><a href="{{ url('/projects') }}/{{ $pro->id }}">{{ $pro->brcLevel ? $pro->brcLevel->name : 'N/A' }}</a></td>
                                    <td><a href="{{ url('/projects') }}/{{ $pro->id }}">{{ $pro->principal }}</a></td>
                                    @if($status == "completed")
                                    <td><a href="{{ url('/projects') }}/{{ $pro->id }}">{{ $pro->checklist_submit_date }}</a></td>
                                    @endif
                                    <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">
                                            <div class="menu-item px-3">
                                                <a href="{{ url('/projects') }}/{{ $pro->id }}" class="menu-link px-3">View</a>
                                            </div>
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3" onclick="event.preventDefault();editRow({{ $pro->id }})">Edit</a>
                                            </div>
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3" onclick="event.preventDefault();deleteRow({{ $pro->id }})"
                                                    data-kt-users-table-filter="delete_row">Delete</a>
                                            </div>
                                        </div>
                                    </td>
                                    @endforeach
                                </tr>
                            </tbody>
                        </table>

                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
    <!--begin::Footer-->
    <div id="kt_app_footer" class="app-footer">
        <!--begin::Footer container-->
        <div
            class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
            <!--begin::Copyright-->
            <div class="text-gray-900 order-2 order-md-1">
                <span class="text-muted fw-semibold me-1">2024&copy;</span>
                <a href="https://keenthemes.com" target="_blank"
                    class="text-gray-800 text-hover-primary">Keenthemes</a>
            </div>
            <!--end::Copyright-->
            <!--begin::Menu-->
            <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                <li class="menu-item">
                    <a href="https://keenthemes.com" target="_blank" class="menu-link px-2">About</a>
                </li>
                <li class="menu-item">
                    <a href="https://devs.keenthemes.com" target="_blank"
                        class="menu-link px-2">Support</a>
                </li>
                <li class="menu-item">
                    <a href="https://1.envato.market/EA4JP" target="_blank"
                        class="menu-link px-2">Purchase</a>
                </li>
            </ul>
            <!--end::Menu-->
        </div>
        <!--end::Footer container-->
    </div>
    <!--end::Footer-->
</div>
<!--end:::Main-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

        document.addEventListener('DOMContentLoaded', function () {
        const submitButton = document.getElementById('submitButton');
        const form = document.getElementById('kt_modal_new_address_form'); // Replace with your actual form ID

            form.addEventListener('submit', function (event) {
                // Disable the button to prevent multiple clicks
                submitButton.disabled = true;
                submitButton.querySelector('.indicator-label').style.display = 'none';
                submitButton.querySelector('.indicator-progress').style.display = 'inline-block';
            });
        });
        
        $('#addBtn').on('click', function() {
		
			$('#kt_modal_new_address_form')[0].reset();
			$('#head_name').html("Add Project New");
			$('#task_list tbody').empty();
		});
						
        function editRow(id) {
         
            $.ajax({
                type: 'GET',
                url: '{{ url('/project/edit') }}/' + id, 
                success: function(data) {

                    console.log(data);
                    $('#template_id').val(data.template_id);
                    $('#project_name').val(data.project_name);
                    $('#school_name').val(data.school_name);
                    //$('#district').val(data.district);
                    setTimeout(function() {
                        $('#district').val(data.district).change();
                    }, 100);
                    $('#brc_level_id').val(data.brc_level).change();
                    $('#assigned_team_id').val(data.assigned_team).change();
                    $('#principle').val(data.principal);
                    $('#principlePHno').val(data.principal_phone);
                    $('#address').val(data.address);
                    //$('#panchayat').val(data.panchayat);
                    $('#panchayat').val(data.panchayat).change();
                    $('#pincode').val(data.pincode);
                    $('#head_name').html("Edit Project");
                    $('#task_list tbody').empty(); // Clear existing rows
                    
                    const contractors = @json($contractor);
                    const delivery_agents = @json($delivery);
                    const dist_co = @json($distco);

                    if (data.tasks.length) {
                        data.tasks.forEach(function(task) {
                            
                             let options = '';
                            if (task.assigned_to_type === 'contractor') {
                                options += '<optgroup label="Assigned to Contractor">';
                                contractors.forEach(function(contra) {
                                    options += `
                                        <option value="${contra.user_id}" ${task.assigned_to == contra.user_id ? 'selected' : ''}>
                                            ${contra.user.name}
                                        </option>`;
                                });
                                options += '</optgroup>';
                            }
                    
                            // Label for Delivery Agent
                            if (task.assigned_to_type === 'delivery_agent') {
                                options += '<optgroup label="Assigned to Delivery Agent">';
                                delivery_agents.forEach(function(del) {
                                    options += `
                                        <option value="${del.user_id}" ${task.assigned_to == del.user_id ? 'selected' : ''}>
                                            ${del.user.name}
                                        </option>`;
                                });
                                options += '</optgroup>';
                            }
                    
                            $('#task_list tbody').append(`
                                <tr>
                                    <td><input type="hidden" name="task_id[]" value="${task.id}"></td>
                                    <td><input type="text" class="form-control" name="task_name[]" value="${task.task_name}" /></td>
                                    <td>
                                        <select class="form-control form-control-solid assigned_to" name="assigned_to_id[]">
                                            ${options}
                                        </select>
                                    </td>
                                    <td><input type="date" class="form-control form-control-solid" name="start_date[]" value="${task.start_date}"/></td>
                                    <td><input type="date" class="form-control form-control-solid" name="end_date[]" value="${task.end_date}"/></td>
                                    <td>
                                        <select class="form-control" name="priority[]">
                                            <option value="" ${task.priority ? '' : 'selected'}>Select</option>
                                            <option value="high" ${task.priority === 'high' ? 'selected' : ''}>High</option>
                                            <option value="medium" ${task.priority === 'medium' ? 'selected' : ''}>Medium</option>
                                            <option value="low" ${task.priority === 'low' ? 'selected' : ''}>Low</option>
                                        </select>
                                    </td>
                                </tr>
                            `);
                        });
                    } else {
                        $('#task_list tbody').append(`
                            <tr>
                                <td colspan="5" class="text-center">No tasks available</td>
                            </tr>
                        `);
                    }
                    $('#kt_modal_new_address_form').attr('action', `{{ url('/project/update') }}/${id}`);
                    $('#kt_modal_new_address_form').find('input[name="_method"]').val('PUT');
 
                    $('#kt_modal_new_address').modal('show');
                }
            });
        }
    $(document).ready(function() {    
        
        
        $('#district').change(function () {
            const district = $(this).val();
    
            // Clear the Panchayat dropdown
            $('#panchayat').html('<option value="">Select</option>');
    
            if (district) {
                // Make AJAX request to fetch panchayats
                $.ajax({
                    url: '{{ route('getPanchayats') }}', // Replace with your route URL
                    type: 'GET',
                    data: { district: district },
                    success: function (data) {
                        if (data) {
                            //console.log(data);
                            // Append panchayat options
                            data.forEach(function (panchayat) {
                               
                                $('#panchayat').append(
                                    `<option value="${panchayat.panchayat_name}">${panchayat.panchayat_name}</option>`
                                );
                            });
                        }
                    },
                    error: function () {
                        alert('Failed to load panchayats. Please try again.');
                    },
                });
               
                 $('#brc_level_id').html('<option value="">Select</option>');
                 
                 $.ajax({
                    url: '{{ route('getBRCForDistrict') }}', // Replace with your route URL
                    type: 'GET',
                    data: { district: district },
                    success: function (data) {
                        if (data) {
                            //console.log(data);
                            // Append panchayat options
                            data.forEach(function (brclevel) {
                               
                                $('#brc_level_id').append(
                                    `<option value="${brclevel.id}">${brclevel.name}</option>`
                                );
                            });
                        }
                    },
                    error: function () {
                        alert('Failed to load BrcLevel. Please try again.');
                    },
                });
            }
        });

        $('#brc_level_id').change(function() {
            var selectedOption = $(this).find('option:selected');
            var phoneNumber = selectedOption.data('phone'); 
            $('#brc_level_ph').val(phoneNumber); 
        });

        $('#assigned_team_id').change(function() {
            var selectedOption = $(this).find('option:selected');
            var phoneNumber = selectedOption.data('phone'); 
            $('#assigned_team_ph').val(phoneNumber); 
        });

        $('#template_id').change(function() {
            var templateId = $(this).val(); 
            const contractorsData = @json($contractor);
            const delivery_agentsData = @json($delivery);
            const dist_coData = @json($distco);
            if (templateId) {
                $.ajax({
                    url: '{{ url('/getTemplateTasks') }}/' + templateId, 
                    method: 'GET',
                    success: function(data) {
                        console.log(data);
                        $('#task_list tbody').empty();      
                        $.each(data.tasks, function(index, task) {
                            var taskInput = `<input type="hidden" class="form-control form-control-solid" name="task_id[]" value="${task.id}" readonly/>`;
                            
                            var selectBox = '<select class="form-control form-control-solid assigned_to" id="assigned_to_id" name="assigned_to_id[]">';
                            var hiddenNameInput = '<input type="hidden" class="assigned_to_name" name="assigned_to_name[]" value=""/>';
                            var hiddenEmailInput = '<input type="hidden" class="assigned_to_email" name="assigned_to_email[]" value=""/>'; // New hidden input for email
                            var hiddenTypeInput = `<input type="hidden" class="assigned_to_type" name="assigned_to_type[]" value="${task.associated_team}"/>`;
                            
                            if (task.associated_team === 'contractor') {
                                selectBox += '<option value="" selected>Select Contractor</option>';
                                contractorsData.forEach(function (contractor) {
                                    selectBox += `<option value="${contractor.user_id}" data-email="${contractor.user.email}">${contractor.user.name}</option>`;
                                });
                            } else if(task.associated_team === 'delivery_agent') {
                                selectBox += '<option value="" selected>Select Delivery Agent</option>';
                                delivery_agentsData.forEach(function (delivery_agent) {
                                    selectBox += `<option value="${delivery_agent.user_id}" data-email="${delivery_agent.user.email}">${delivery_agent.user.name}</option>`;
                                });
                            }else if(task.associated_team === 'DistrictCoordinator') {
                                selectBox += '<option value="" selected>Select District Coordinator</option>';
                                dist_coData.forEach(function (dist_co) {
                                    selectBox += `<option value="${dist_co.user_id}" data-email="${dist_co.user.email}">${dist_co.user.name}</option>`;
                                    
                                });
                            }
                            
                            selectBox += '</select>';
                            
                            var startDateInput = '<input type="date" class="form-control form-control-solid" id="kt_datepicker_10" name="start_date[]" placeholder="Start Date" />';
                            var endDateInput = '<input type="date" class="form-control form-control-solid" id="kt_datepicker_10" name="end_date[]" placeholder="End Date" />';
                            var prioritySelect = `
                                <select class="form-control form-control-solid" name="priority[]" id="priority" >
                                    <option value="">Select</option>
                                    <option value="high">High</option>
                                    <option value="medium">Medium</option>
                                    <option value="low">Low</option>
                                </select>
                            `;

                            $('#task_list tbody').append(
                                '<tr>' +
                                    '<td>' + taskInput + '</td>' +
                                    '<td>' + task.task_name + '</td>' +
                                    '<td>' + selectBox + hiddenNameInput + hiddenEmailInput+ hiddenTypeInput+'</td>' +
                                    '<td>' + startDateInput + '</td>' +
                                    '<td>' + endDateInput + '</td>' +
                                    '<td>' + prioritySelect + '</td>' +
                                '</tr>'
                            );
                            
                         
                            $("#kt_daterangepicker_5").daterangepicker();
                        });

                        
                        $('.assigned_to').change(function() {
                            var selectedOption = $(this).find('option:selected');
                            var assignedToId = selectedOption.val();
                            var assignedToName = selectedOption.text();
                            var assignedToEmail = selectedOption.data('email');                            
                           
                            $(this).siblings('.assigned_to_name').val(assignedToName);
                            $(this).siblings('.assigned_to_email').val(assignedToEmail);
                            if(selectedOption!=''){
                                
                            }
                        });
                    },
                    error: function() {
                        alert('Error retrieving tasks');
                    }
                });
            } else {
                $('#task_list tbody').empty();
            }
        });
    
    
    });


    function deleteRow(id) {

        if (confirm('Are you sure you want to delete this task?')) {
                fetch(`{{ url('/projects/delete') }}/${id}`, { // Corresponds to Route::delete('/tasks/{id}', ...)
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    
                    window.location.reload();
                })
                .catch(error => console.error('Error:', error));
            }
    }

    function showProjectDetails(projectId) {
        window.location.href = `{{ url('/projects') }}/${projectId}`; // Adjust the URL according to your routing
    }
    
    
    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, -1);
    
            // 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();
    });
    
    document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            buttons.forEach(btn => btn.classList.remove('active')); // Remove active class from all
            this.classList.add('active'); // Add active class to clicked button
        });
    });
    });
</script>
<style>
a{
    color: #6c747d;
}
.btn.active {
    background: #599ff0 !important;
    color: white !important;
}
</style>
@endsection