@extends('layouts.front.shell')

@section('cssdefine')

<link rel="stylesheet" type="text/css" href="{{ asset('css/page/part/erp/case_edit.css') }}">

@endsection

@section('content')

<div id="content_area" class="shrink">
    <div class="w-100 content_layer rounded_lv4">
        <div class="container-fluid">
            <div class="row">
                <div class="col mb-3">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <div class="cursor_pointer btn_icon_word icon_sm" onclick="history.back();" style="z-index: 1;">
                                <i class="fas fa-arrow-left"></i>
                            </div>
                        </div>
                        <div class="col main_title mb-lg-0">[案件名稱]－編輯/新增</div>
                    </div>
                </div>
                <div class="col-md-auto mb-3">
                    <div class="form-row justify-content-end">
                        <div class="col-auto">
                            <button class="btn_text text_sm btn_primary" onclick="location.href=''"><i class="fa-solid fa-plus"></i>&ensp;建立會議</button>
                        </div>
                        <div class="col-auto">
                            <button class="btn_text text_sm btn_primary" onclick="location.href=''"><i class="fa-solid fa-chart-gantt"></i>&ensp;專案詳細</button>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <ul class="nav nav-pills mb-3 tab_pills justify-content-center">
                        <li class="nav-item">
                            <a class="nav-link active" href="case_info.php">案件資訊</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="case_file.php">相關檔案</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="case_content.php">財會規劃</a>
                        </li>
                    </ul>
                </div>
                <div class="col-12">
                    <div class="divide_line"></div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-6 col-lg-4 form-group">
                    <label for="name">案件名稱</label>
                    <input type="text" id="name" class="form-control form_control_cover inputbox_primary">
                </div>
                <div class="col-md-6 col-lg-4 form-group">
                    <div class="form-row justify-content-between align-items-end">
                        <div class="col">
                            <label for="note">案件編號</label>
                        </div>
                        <div class="col-auto">
                            <button class="btn_text text_sm btn_primary mb-2">自動編號</button>
                        </div>
                    </div>
                    <input type="text" id="note" class="form-control form_control_cover inputbox_primary">
                </div>
                <div class="col-md-6 col-lg-4 form-group">
                    <div class="row">
                        <div class="col">
                            <label for="change_btn">客戶名稱</label>
                        </div>
                        <div class="col-auto h4 mb-0">
                            <button class="btn_text text_sm btn_primary" data-toggle="modal" data-target="#change_customer_modal" id="change_btn">更改</button>
                        </div>
                    </div>
                    <!-- <button class="btn_text text_sm btn_primary" data-toggle="modal" data-target="#change_customer_modal" id="change_btn">選取</button> -->

                    <div class="form-row list_container">
                        <div class="col-12">
                            <div class="row list_body align-items-center mt-0 cursor_pointer">
                                <div class="col">
                                    <div class="row align-items-center">
                                        <div class="col-12 pb-0 multiline_ellipsis clamp_2 item_name">客戶名稱</div>
                                        <div class="col-12 fsize_1rem color_secondary item_code">[客戶代號]</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 form-group">
                    <div class="row">
                        <div class="col">
                            <label for="change_btn">相關專案</label>
                        </div>
                        <div class="col-auto h4 mb-0">
                            <button class="btn_text text_sm btn_primary" data-toggle="modal" data-target="#change_project_modal" id="change_btn">更改</button>
                        </div>
                    </div>
                    <!-- <button class="btn_text text_sm btn_primary" data-toggle="modal" data-target="#change_customer_modal" id="change_btn">選取</button> -->
                    <div class="form-row list_container">
                        <div class="col-12">
                            <div class="row list_body align-items-center mt-0 cursor_pointer">
                                <div class="col">
                                    <div class="row align-items-center">
                                        <div class="col-12 pb-0 multiline_ellipsis clamp_2 item_name">[專案名稱]</div>
                                        <div class="col-12 fsize_1rem color_secondary item_code">[專案編號]</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8">
                    <label>案件時程</label>
                    <div class="form-row">
                        <div class="col-6 form-group">
                            <input type="date" class="form-control form_control_cover inputbox_primary" placeholder="起">
                        </div>
                        <div class="col-6 form-group">
                            <input type="date" class="form-control form_control_cover inputbox_primary" placeholder="迄">
                        </div>
                    </div>
                </div>
                <div class="col-12 form-group">
                    <label for="memo">備註</label>
                    <textarea id="memo" class="form-control form_control_cover inputbox_primary"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="tool_area" class="py-2 bg-light shrink border-top shadow-lg">
    <div class="form-row justify-content-end">
        <div class="col-auto">
            <button class="btn_text btn_primary"><i class="far fa-save"></i>&ensp;儲存資訊</button>
        </div>
    </div>
</div>

<div class="modal fade modal_style" id="change_customer_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header d-block pb-0">
                <div class="row no-gutters">
                    <div class="col modal-title">
                        <div class="mb-3 font-weight-bold">選取客戶</div>
                        <div class="row align-items-end">
                            <div class="col">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <input type="text" placeholder="客戶名稱搜尋" class="form-control form_control_cover inputbox_primary">
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input type="text" placeholder="客戶代號搜尋" class="form-control form_control_cover inputbox_primary">
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto mb-3">
                                <button class="btn_text text_sm btn_secondary" data-dismiss="modal">搜尋</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                </div>
            </div>
            <div class="modal-body scrollbar_y">
                <!--無搜尋結果-->
                <div class="row">
                    <div class="col-12 font-weight-bold text-center">無搜尋結果...</div>
                </div>
                <!--有搜尋結果 或 單純的列表呈現-->
                <div class="row">
                    <div class="col-12">
                        <div class="form-row list_container">
                            <!--不換頁-->
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_0" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_0" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_1" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_1" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_2" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_2" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_3" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_3" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_4" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_4" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_5" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_5" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_6" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_6" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_7" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_7" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_8" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_8" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[客戶名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[客戶代號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="customer_radio_9" name="customer_list_radio" class="d-none">
                                        <label for="customer_radio_9" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-block">
                <div class="form-row justify-content-end">
                    <div class="col-auto">
                        <button class="btn_text text_sm btn_secondary" data-dismiss="modal">取消</button>
                    </div>
                    <div class="col-auto">
                        <button class="btn_text text_sm btn_primary" data-dismiss="modal">確定新增</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade modal_style" id="change_project_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header d-block pb-0">
                <div class="row no-gutters">
                    <div class="col modal-title">
                        <div class="mb-3 font-weight-bold">選取專案</div>
                        <div class="row align-items-end">
                            <div class="col">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <input type="text" placeholder="客戶名稱搜尋" class="form-control form_control_cover inputbox_primary">
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input type="text" placeholder="客戶代號搜尋" class="form-control form_control_cover inputbox_primary">
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto mb-3">
                                <button class="btn_text text_sm btn_secondary" data-dismiss="modal">搜尋</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                </div>
            </div>
            <div class="modal-body scrollbar_y">
                <!--無搜尋結果-->
                <div class="row">
                    <div class="col-12 font-weight-bold text-center">無搜尋結果...</div>
                </div>
                <!--有搜尋結果 或 單純的列表呈現-->
                <div class="row">
                    <div class="col-12">
                        <div class="form-row list_container">
                            <!--不換頁-->
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_0" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_0" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_1" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_1" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_2" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_2" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_3" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_3" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_4" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_4" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_5" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_5" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_6" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_6" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_7" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_7" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_8" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_8" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row list_body align-items-center mt-0 select_item cursor_pointer">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-12 pb-0 multiline_ellipsis clamp_2">[專案名稱]</div>
                                            <div class="col-12 fsize_1rem color_secondary">[專案編號]</div>
                                        </div>
                                    </div>
                                    <div class="col-auto h4 mb-0">
                                        <input type="radio" id="project_radio_9" name="customer_list_radio" class="d-none">
                                        <label for="project_radio_9" class="select_check">
                                            <i class="fa-regular fa-circle-check"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-block">
                <div class="form-row justify-content-end">
                    <div class="col-auto">
                        <button class="btn_text text_sm btn_secondary" data-dismiss="modal">取消</button>
                    </div>
                    <div class="col-auto">
                        <button class="btn_text text_sm btn_primary" data-dismiss="modal">確定新增</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@section('jsdefine')

<script>
    $('.select_item').click(function() {
        var input_status = $(this).find('input[type="radio"]').prop('checked');
        if (input_status == false) {
            var already_checked = $(this).closest('.list_container').find('label i.fa-solid');
            if (already_checked.length > 0) {
                already_checked.closest('.col-auto').find('input[type="radio"]').attr('checked', 'false');
                already_checked.removeClass('fa-solid').addClass('fa-regular');
            }
            $(this).find('label i').removeClass('fa-regular').addClass('fa-solid');
            var inputID = $(this).find("label").attr("for");
            $('#' + inputID).click();
        }
    });
</script>

@endsection