@extends('layouts.front.shell')

@section('cssdefine')

<link rel="stylesheet" type="text/css" href="{{ asset('css/page/swiper/swiper-bundle.min.css') }}">
<script type="text/javascript" src="{{ asset('js/page/swiper/swiper-bundle.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('css/page/swiper/swiper_layout.css') }}">

<link rel="stylesheet" type="text/css" href="{{ asset('css/page/part/erp/case_content.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" 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 active" 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-12">
                    <div class="row">
                        <div class="col">
                            <div class="swiper mb-3" id="primary_category">
                                <div class="swiper-wrapper py-1">
                                    <div class="swiper-slide selected">
                                        <button class="btn_tab text_sm btn_primary">第1期</button>
                                    </div>
                                    <div class="swiper-slide  ">
                                        <button class="btn_tab text_sm btn_primary">第2期</button>
                                    </div>
                                    <div class="swiper-slide  ">
                                        <button class="btn_tab text_sm btn_primary">第3期</button>
                                    </div>
                                </div>
                                <div class="swiper-button-next carousel_btn next shadow"><i class="fas fa-chevron-right"></i></div>
                                <div class="swiper-button-prev carousel_btn prev shadow"><i class="fas fa-chevron-left"></i></div>
                            </div>
                            <script>
                                var primary_category = new Swiper("#primary_category", {
                                    slidesPerView: "auto",
                                    spaceBetween: 10,
                                    slideToClickedSlide: true,
                                    freeMode: true,
                                    preventClicks: true,
                                    a11y: false,
                                    onlyExternal: true,
                                    noSwiping: true,
                                    allowTouchMove: false,
                                    navigation: {
                                        nextEl: ".swiper-button-next",
                                        prevEl: ".swiper-button-prev",
                                    }
                                });
                            </script>
                        </div>
                        <div class="col-sm-auto mb-3">
                            <button class="btn_text text_sm btn_primary ml-auto" data-toggle="modal" data-target="add_pariod"><i class="fa-solid fa-plus"></i>&ensp;新增期數</button>
                        </div>
                    </div>
                </div>
                <div class="col-12 period_content">
                    <button class="btn_text text_sm btn_primary ml-auto mb-3 edit_btn" data-toggle="modal" data-target="edit_period">
                        <i class="fa-solid fa-pen"></i>&ensp;編輯第1期
                    </button>
                    <div class="row">
                        <div class="col-sm-4 form-group">
                            <label for="name">案況名稱</label>
                            <div class="present">[案況名稱]</div>
                            <div class="edit">
                                <input type="text" class="form-control inputbox_style inputbox_primary" id="name">
                            </div>
                        </div>
                        <div class="col-6 col-sm-4 form-group">
                            <label for="build_time">成立時間</label>
                            <div class="present">2023-01-01</div>
                            <div class="edit">
                                <input type="date" class="form-control inputbox_style inputbox_primary" id="build_time">
                            </div>
                        </div>
                        <div class="col-6 col-sm-4 form-group">
                            <label for="deadline">截止期限</label>
                            <div class="present">2023-02-01</div>
                            <div class="edit">
                                <input type="date" class="form-control inputbox_style inputbox_primary" id="deadline">
                            </div>
                        </div>
                    </div>
                    <div class="row list_container mb-3">
                        <div class="col-12 ">
                            <div class="row list_head d-none d-lg-flex">
                                <div class="col-4">類型</div>
                                <div class="col-4">金額</div>
                                <div class="col-4">描述</div>
                            </div>
                            <div class="row list_body align-items-center mt-0">
                                <div class="col-auto col-lg-4">
                                    <div class="d-flex">
                                        <div class="tag_frame tag_primary">應收</div>
                                    </div>
                                </div>
                                <div class="col-auto col-lg-4">
                                    <div class="present"><sup>NT$</sup>200,000</div>
                                    <div class="edit">
                                        <div class="form-row align-items-center">
                                            <div class="py-0 col-auto">NT$</div>
                                            <div class="py-0 col">
                                                <input type="number" class="form-control inputbox_style inputbox_primary" id="amount">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md col-lg-4">
                                    <div class="present">[描述]</div>
                                    <div class="edit">
                                        <input type="text" class="form-control inputbox_style inputbox_primary" id="description" placeholder="描述">
                                    </div>
                                </div>
                            </div>
                            <div class="row list_body align-items-center mt-0">
                                <div class="col-auto col-lg-4">
                                    <div class="d-flex">
                                        <div class="tag_frame tag_primary">應收</div>
                                    </div>
                                </div>
                                <div class="col-auto col-lg-4">
                                    <div class="present"><sup>NT$</sup>200,000</div>
                                    <div class="edit">
                                        <div class="form-row align-items-center">
                                            <div class="py-0 col-auto">NT$</div>
                                            <div class="py-0 col">
                                                <input type="number" class="form-control inputbox_style inputbox_primary" id="amount">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md col-lg-4">
                                    <div class="present">[描述]</div>
                                    <div class="edit">
                                        <input type="text" class="form-control inputbox_style inputbox_primary" id="description" placeholder="描述">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <button class="btn_text text_sm btn_primary mx-auto mb-3 save_btn">
                        <i class="fa-regular fa-save"></i>&ensp;儲存財會
                    </button>
                </div>


            </div>
        </div>
    </div>
</div>


@endsection


@section('jsdefine')

<script>
    primary_category.on('click', function() {
        $("#primary_category").find(".swiper-slide.selected").toggleClass("selected");
        $(this.clickedSlide).toggleClass("selected");
    });
    $('.edit_btn').click(function() {
        var period_content = $(this).closest('.period_content');
        period_content.find('.present').hide();
        period_content.find('.edit').show();
        period_content.find('.save_btn').css('display', 'block');
        $(this).hide();

    });
    $('.save_btn').click(function() {
        var period_content = $(this).closest('.period_content');
        period_content.find('.present').show();
        period_content.find('.edit').hide();
        period_content.find('.edit_btn').show();
        $(this).hide();
    });
</script>



@endsection